小羊教程——HTML5 CANVAS绘制基础形状

本节将用例子讲解一下用canvas绘制基础形状

前言

<canvas>是HTML5的新增元素,可以通过javascript在其中绘制图形。

<canvas>元素

<canvas id="myCanvas" width="300" height="300">你的浏览器也太老了.</canvas>

<canvas>标签只有两个属性 width 和 height,默认宽高是300px和150px。我们可以通过css来控制大小,如果css定义的尺寸和画布的初始大小比例不一致,会出现拉伸或者压缩的情况。

渲染上下文

//获取canvas元素

var canvas = document.getElementById('myCanvas');

var ctx = null;

//检查是否支持canvas

if(canvas.getContext){

     ctx = canvas.getContext('2d);

}else{

       alert('你的浏览器也太老了');

}

绘制矩形

canvas只支持一种原生的图形绘制:矩形。canvas的默认填充颜色都是黑色。绘制矩形api有三种方式:

//绘制一个填充的矩形

fillRect(x, y, width, height);

//绘制一个矩形的边框

strokeRect(x, y, width, height);

//清除指定矩形区域

clearRect(x, y, width, height);

//示例1

//绘制了一个边长是200px的正方形

ctx.fillRect(50,50,200,200);

//从正方形的中心擦除了一个100x100px的正方形

ctx.clearRect(100,100,100,100);

//在擦除区域内生成了80x80px的正方形边框

ctx.strokeRect(110,110,80,80);

示例1截图

绘制路径

绘制路径的api有:

//新建一条路径

beginPath();

//移动到指定位置

moveTo(x, y);

//绘制一条从当前位置到指定位置的直线

lineTo(x, y);

//闭合路径之后图形绘制命令重新指向到上下文中

closePath();

//通过线条来绘制图形

stroke();

//填充路径

fill();

//圆弧 绘制一个圆心在(x, y)半径是radius的圆弧,anticlockwise为绘制方向,默认是顺时针

arc(x, y, radius, startAngle, endAngle, anticlockwise)

//示例2

//开始绘制

ctx.beginPath();

ctx.arc(100,100,50,0,Math.PI*2,true);//绘制脸

ctx.moveTo(135,100);

ctx.arc(100,100,35,0,Math.PI,false);//绘制嘴,顺时针绘制

ctx.moveTo(85,85);

ctx.arc(80,85,5,0,Math.PI*2,true);//绘制左眼

ctx.moveTo(125,85);

ctx.arc(120,85,5,0,Math.PI*2,true);//绘制右眼

ctx.stroke();

示例2截图
示例2中去掉所有的moveTo之后的效果截图

//示例3

//绘制填充三角形

ctx.beginPath();

ctx.moveTo(30,30);

ctx.lineTo(30,130);

ctx.lineTo(130,130);

ctx.fill();

//绘制描边三角形

ctx.beginPath();

ctx.moveTo(40,30);

ctx.lineTo(140,30);

ctx.lineTo(140,130);

ctx.closePath();

ctx.stroke();

示例3截图

贝塞尔曲线和二次贝塞尔曲线

//绘制贝塞尔曲线,c1x,c1y为控制点,x,y为结束点

quadraticCurveTo(c1x, c1y, x, y);

//绘制二次贝塞尔曲线,c1x,c1y为控制点一,c2x,c2y为控制点二,x,y为结束点

bezierCurveTo(c1x, c1y, c2x, c2y, x, y);

//示例4

ctx.beginPath();

ctx.moveTo(100,40);

ctx.quadraticCurveTo(40,40,160,160)

ctx.stroke();

示例4截图

//示例5 二次贝塞尔曲线

ctx.beginPath();

ctx.moveTo(100,40);

ctx.bezierCurveTo(200,40,100,200,250,250);

ctx.stroke();

示例5截图

小羊教程——HTML5多媒体标签

推荐阅读更多精彩内容