本节将用例子讲解一下用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);