1.1、创建canvas元素
<canvas id="canvas" width="800" height="600">不支持Canvas(当浏览器不支持时会显示出来)</canvas>
1.2、获取、配置canvas元素
(1)、获取创建的canvas元素:
document.getElementById('canvas')
(2)、canvas元素上面绘制图象:
①、首先必须获取canvas环境上下文:canvas.getContext(画布上绘制的类型)
Ⅰ、2d :表示2维
Ⅱ、experimental-webgl:表示试验版3维
Ⅲ、webgl :表示3维
//获取画布元素 var canvas=document.getElementById('canvas'); //绘图的上下文 var context=canvas.getContext('2d');
(3)、canvas属性:
①、设置canvas宽:context.width=1204;
②、设置canvas高:context.heigth=768;
1.3、画线:
(1)、方法
属性 | 说明 |
---|---|
context.moveTo(x,y) | 把画笔移动到x,y坐标,建立新的子路径。(起始位置) |
context.lineTo(x,y) | 建立上一个点到x,y坐标的直线,如果没有上一个点,则等同于moveTo(x,y),把(x,y)添加到子路径中。(启动/终点) |
context.stroke() | 描绘子路径(开始画线) |
context.closePath() | 如果当前子路径是打开的,就关闭它。否则把子路径中的最后一个点和路径中的第一个点连接起来,形成闭合回路。 |
context.beginPath() | 清空子路径,一般用于开始路径的创建。在几次循环地创建路径的过程中,每次开始创建时都要调用beginPath函数。 |
context.fill() | 执行填充 |
(2)、属性:
context.lineWidth=10 //设置线宽 context.strokeStyle="blue" //设置线的颜色 context.fillStyle="lightgreen" //设置填充颜色
1.4、绘制矩形:
属性 | 说明 |
---|---|
context.strokeRect(x,y,width,height) | 以x,y为左上角,绘制宽度为width,高度为height的矩形。 |
context.fillRect(x,y,width,height) | 以x,y为左上角,填充宽度为width,高度为height的矩形。 |
context.clearRect(x,y,width,height) | 清除以x,y为左上角,宽度为width,高度为height的矩形区域。 |
1.5、绘制圆弧
context.arc(x,y,radius,startAngle,endAngle,anticlockwise)
(1)、arc方法用来绘制一段圆弧路径:
参数 | 说明 |
---|---|
x,y | 圆心位置 |
radius | 半径 |
startAngle | 起始弧度 |
endAngle | 终止弧度来 (Math.PI=180° Math.PI*2=360°【一周】) |
anticlockwise | 指定旋转方向:如果为 true 就是逆时针,false 则为顺时针 |
1.6、绘制图像:
属性 | 说明 |
---|---|
context.drawImage(image,x,y) | 把image图像绘制到画布上x,y坐标位置。 |
context.drawImage(image,x,y,w,h) | 把image图像绘制到画布上x,y坐标位置,图像的宽度是w,高度是h。 |
context.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh) | 截取image图像以sx,sy为左上角坐标,宽度为sw,高度为sh的一块矩形区域绘制到画布上, 以dx,dy坐标位置,图像宽度是dw,高度是dh。其中image可以是htmlImageElement元素,htmlcanvasElement元素,htmlVideoElement元素 |
1.7、绘制文字:
(1)、函数
属性 | 说明 |
---|---|
context.fillText(text,x,y,[maxWidth]) | 在canvas上填充文字,text是绘制的文字,x,y分别表示绘制在canvas上的横,纵坐标最后一个参数可选,表示显示文字的最大宽度,防止文字显示溢出。 |
context.strokeText(text,x,y,[maxWidth]) | 在canvas上描边文字,参数的意义同fillText |
(2)、属性:
说明 | 例 |
---|---|
获取画布元素 | var canvas=document.getElementById("id"); |
绘图的上下文 | var context=canvas.getContext(画布上绘制的类型) |
设置线宽 | context.lineWidth=10; |
设置线的颜色 | context.strokeStyle="blue"; |
设置填充颜色 | context.fillStyle="lightgreen"; |
设置字体 | context.font;【例:context.font='italic bolder 48px 黑体';】 |
设置旋转坐标原点 | context.translate(500,500); |
旋转度数 | context.rotate(Math.PI); |
二、WebGL(3D绘图标准)
1、下载:three.js等
三、二次贝塞尔曲线及三次贝塞尔曲线:
1、二次贝塞尔曲线:quadraticCurveTo(cp1x, cp1y, x, y) 【cp1x,cp1y为一个控制点,x,y为结束点。】
2、三次贝塞尔曲线:bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)【cp1x,cp1y为控制点一,cp2x,cp2y为控制点二,x,y为结束点。】
四、动画
context.save(); //保存save以上context对象设置的属性值 context.restore();//恢复到先前保存在context对象上的所有属性值
实现动画效果的非常重要的API:window.requestAnimationFrame(callback)