本节将用例子讲解一下用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截图
网友评论