2013年4月19日

HTML5的canvas学习笔记


入门级的各种用法解释:

var canvas=document.getElementById(“tutorial”);
获取canvas元素对象

一、ctx=canvas.getContext(“2d”); 画布创建

二、绘制图形
1、绘制矩形的列子:
ctx.fillRect(x,y,width,height);画实心矩形
ctx.strokeReck(x,y,width,height);勾画矩形边框
ctx.clearReck(x,y,width,height);扣除一块透明的矩形
与路径函数不一样,这三个函数的效果会立刻在canvas上反映出来

三、绘制路径
1、ctx.beginPath(); 创建一个路径,起始坐标设置是原点(0,0)
在内存里,路径是以一组子路径(直线、弧线等)的形式存储的,它们共同构成一个图形
每次调用beginPath,子路径组都会被重置,然后可以绘制新的图形

2、ctx.moveTo(x,y);移动画笔起始点

3、ctx.closePath();
尝试用直线连接当前端点与起始端点来关闭路径,但如果图形已经关闭或者只有一个点,
它会什么都不做(此步不是必须的)

4、ctx.stroke();绘制图形边框
使用此方法不会自动闭合路径,需要在前面加上ctx.closePath();

5、ctx.fill();填充出一个实心图形
当调用fill时,开放的路径会自动闭合,而无须调用closePath

四、绘制各种线条
1、ctx.lineTo(x,y);此方法接受终点的坐标(x,y)做为参数。
起始坐标取决于前一路经,前一路径的终点即当前路径的起点,起始坐标也可以通过moveTo方法来设置

五、弧线Arcs
用arc方法来绘制弧线或圆
1、ctx.arc(x,y,radius,startAngle,endAngle,anticlockwise);
方法接受五个参数:x,y是圆心坐标,radius是半径,startAngle和endAngle分别是起末弧度
度和弧度直接的转换:var radians=(Math.PI/180)*degrees
anticlockwise为true表示逆时针,反之顺时针

标签:,

微信扫一扫二维码访问


16年前端经验
加微信好友直接沟通
了解《我的十年》