H5 canvas画布总结（绘制哆啦A梦）

canvas标签

只是图形容器定义图形，使用 canvas 绘制路径,盒、圆、字符以及添加图像

1.创建一个画布

<canvas id='cv' width='400px' height='600px'></canvas>

2.绘制图形(javastript)

var cv_1 = document.getElementById("cv");
var can = cv_1.getContext('2d');

解析：
首先，找到canvas元素： var cv_1 = document.getElementById(“cv”);
然后，创建context对象： var can = cv_1.getContext(‘2d’);

getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

Canvas--矩形：

  // 填充颜色can.fillStyle = "rgb(200,0,0)";//绘制矩形can.fillRect (10, 10, 55, 50);can.fillStyle = "rgba(0, 0, 200, 0.5)";can.fillRect (50, 50, 55, 50);

解析：
（1）fillStyle属性可以是CSS颜色，渐变，或图案。fillStyle 默认设置是#000000（黑色）。
（2）fillRect(x,y,width,height) 方法定义了矩形当前的填充方式。
x,y为相对位置，width,height为绘制的矩形的宽高
（3）clearRect(x,y,width,height) 清除指定区域大小

canvas坐标
距离屏幕左上角左边10px，上边10px，宽600px,高400px的矩形
fillRect(10，10，600，400)

Canvas--路径

// 绘制一条直线
can.beginPath(); //新建一条path
can.moveTo(50, 50); //把画笔移动到指定的坐标
can.lineTo(200, 50);  //绘制一条从当前位置到指定坐标(200, 50)的直线.
//闭合路径。会拉一条从当前点到path起始点的直线。如果当前点与起始点重合，则什么都不做
can.closePath();
can.stroke(); //绘制路径。

解析：

（1）moveTo(x,y) 定义线条开始坐标
（2）lineTo(x,y) 定义线条结束坐标
（3）beginPath()开始绘制
（4）closePath()结束绘制

Canvas--圆弧

can.beginPath();
can.arc(95,50,40,0,2*Math.PI);
can.stroke();

解析：
路径方向默认为false（顺时针）

can.beginPath();
can.arc(320, 220, 40, 0, -Math.PI / 2, true);
can.fillStyle = 'red'
can.closePath();
can.fill();

Canvas--文本

can.font="30px Arial";
can.fillText("Hello World",10,50);
can.strokeText("Hello World",10,100);

解析：
（1）font - 定义字体
（2）fillText(text,x,y) - 在 canvas 上绘制实心的文本
（3）strokeText(text,x,y) - 在 canvas 上绘制空心的文本

Canvas--渐变

线性渐变：

// 创建渐变
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");// 填充渐变
can.fillStyle=grd;
can.fillRect(10,10,150,80);

径向渐变：

// 创建渐变
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");// 填充渐变
can.fillStyle=grd;
can.fillRect(10,10,150,80);

解析：
（1）createLinearGradient(x,y,x1,y1) - 创建线条渐变
（2）createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变
（3）addColorStop(0-1,“red”); 指定颜色停止，参数使用坐标来描述，可以是0至1

3.应用canvas绘制哆啦A梦

在画布上对绘画进行定位。鼠标移动的矩形框上，显示定位坐标。

getBoundingClientRect()获取页面中某元素的左、上、右、下相对与浏览器窗口的位置

<style type="text/css">div{width: 50px;height: 50px;border: 1px solid #000000;position: relative;}#cv{margin: 0 auto;display: block;border: 2px solid #F0F8FF;}
</style><canvas id="cv" width="400px" height="600px"></canvas><div id="divx" style="top: -600px;"></div>
<div id="divy" style="top: -600px;"></div>

<script type="text/javascript">var can=document.getElementById("cv");var cxt=can.getContext('2d');//canvas画布相对浏览器窗口的距离x，yvar x=Math.floor(can.getBoundingClientRect().left);var y=Math.floor(can.getBoundingClientRect().top);window.onmousemove=function(event){move(event)}function move(event){var btx=event.clientX-x;//求出在canvas元素内的btx，btyvar bty=event.clientY-y;document.getElementById("divx").innerHTML=btx;document.getElementById("divy").innerHTML=bty;}
</stricp>

补充内容：
二级贝塞尔曲线:quadraticCurveTo(cp1x, cp1y, x, y)
三级贝塞尔曲线:bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
说明：
参数 1 和 2：控制点 1 的坐标
参数 3 和 4：控制点 2 的坐标
参数 5 和 6：结束点的坐标

//二级贝塞尔曲线绘制
can.moveTo(330,45)//路径起点
can.quadraticCurveTo(380,100,430,45)
can.lineWidth = 2
can.strokeStyle = 'blue'
can.stroke()//三级贝塞尔
can.moveTo(350,210)
can.bezierCurveTo(440,310,460,110,550,210)
can.fillStyle = 'yellowgreen'
can.stroke()
can.fill()
can.closePath()

哆啦A梦完整代码：

<style type="text/css">div{width: 50px;height: 50px;border: 1px solid #000000;position: relative;}#cv{margin: 0 auto;display: block;border: 2px solid #F0F8FF;}
</style><canvas id="cv" width="400px" height="600px"></canvas><div id="divx" style="top: -600px;"></div>
<div id="divy" style="top: -600px;"></div>
<script type="text/javascript">var can=document.getElementById("cv");var cxt=can.getContext('2d');var x=Math.floor(can.getBoundingClientRect().left);var y=Math.floor(can.getBoundingClientRect().top);window.onmousedown=function(event){move(event)}function move(event){var btx=event.clientX-x;var bty=event.clientY-y;document.getElementById("divx").innerHTML=btx;document.getElementById("divy").innerHTML=bty;}// 大头cxt.beginPath();cxt.arc(200, 175, 175, 0.7 * Math.PI, 0.3 * Math.PI);//绘制弧，中心点（200，175），半径175cxt.fillStyle = '#0bb0da';cxt.fill();cxt.stroke();cxt.closePath();// 脸cxt.beginPath();cxt.fillStyle = '#fff';cxt.moveTo(110, 110);//将路径移到点（110，110），不创建线条cxt.quadraticCurveTo(-10, 200, 120, 315);//创建二次贝塞尔曲线,控制点(-10,200),结束点(120,315)cxt.lineTo(280, 315);//添加一个新点，然后在画布中创建从（110，110）到（280，315）的线条cxt.quadraticCurveTo(410, 210, 290, 110);cxt.lineTo(110, 110);cxt.fill();cxt.stroke();cxt.closePath();//眼睛cxt.beginPath();cxt.lineWidth = 1;cxt.fillStyle = '#fff';cxt.moveTo(110, 110);cxt.bezierCurveTo(110, 25, 200, 25, 200, 100);//创建三次贝塞尔曲线,控制点1(110,25),控制点2(200,25),结束点(200,100)，也就是画左上半椭圆cxt.bezierCurveTo(200, 175, 110, 175, 110, 100);//画左下半椭圆cxt.moveTo(200, 100);cxt.bezierCurveTo(200, 25, 290, 25, 290, 100);cxt.bezierCurveTo(290, 175, 200, 175, 200, 100);cxt.fill();cxt.stroke();cxt.closePath();// 左右眼球cxt.beginPath();cxt.fillStyle = '#000';cxt.arc(230, 130, 12, 0, 2 * Math.PI);cxt.fill();cxt.stroke();cxt.closePath();//左眼球cxt.beginPath();cxt.fillStyle = '#000';cxt.arc(170, 130, 12, 0, 2 * Math.PI);cxt.fill();cxt.stroke();cxt.closePath();// 鼻子cxt.beginPath();cxt.arc(200, 165, 25, 0, 2 * Math.PI);cxt.fillStyle = '#d05823';cxt.fill();cxt.stroke();cxt.closePath();//左胡须cxt.beginPath();cxt.moveTo(80, 175);cxt.lineTo(150, 195);cxt.moveTo(80, 200);cxt.lineTo(150, 205);cxt.moveTo(80, 225);cxt.lineTo(150, 215);//中部胡须cxt.moveTo(200, 195);cxt.lineTo(200, 290);//右胡须cxt.moveTo(250, 195);cxt.lineTo(320, 175);cxt.moveTo(250, 205);cxt.lineTo(320, 200);cxt.moveTo(250, 215);cxt.lineTo(320, 225);cxt.stroke();//嘴cxt.moveTo(80, 240);cxt.quadraticCurveTo(200, 350, 320, 240);cxt.stroke();cxt.closePath();//围巾cxt.beginPath();cxt.moveTo(96, 316);cxt.lineTo(305, 316);cxt.lineTo(320, 316);cxt.arcTo(330, 316, 330, 326, 10);//在画布上创建介于两个切线之间的弧，起点坐标为(330,316),终点坐标为(330,326),半径为10cxt.lineTo(330, 336);cxt.arcTo(330, 346, 305, 346, 10);cxt.lineTo(81, 346);cxt.arcTo(71, 346, 71, 336, 10);cxt.lineTo(71, 326);cxt.arcTo(71, 316, 81, 316, 10);cxt.lineTo(96, 316);cxt.fillStyle = '#b13209';cxt.fill();cxt.stroke();cxt.closePath();//下半身cxt.beginPath();cxt.fillStyle = '#0bb0da';cxt.moveTo(80, 346);//左衣服cxt.lineTo(26, 406);cxt.lineTo(65, 440);cxt.lineTo(85, 418);cxt.lineTo(85, 528);cxt.lineTo(185, 528);//右衣服cxt.lineTo(315, 528);cxt.lineTo(315, 418);cxt.lineTo(337, 440);cxt.lineTo(374, 406);cxt.lineTo(320, 346);cxt.fill();cxt.stroke();cxt.closePath();//左手cxt.beginPath();cxt.fillStyle = '#fff';cxt.arc(37, 433, 30, 0, 2 * Math.PI);cxt.fill();cxt.stroke();//右手cxt.beginPath();cxt.fillStyle = '#fff';cxt.arc(363, 433, 30, 0, 2 * Math.PI);cxt.fill();cxt.stroke();cxt.closePath();//肚子cxt.beginPath();cxt.fillStyle = '#fff';cxt.arc(200, 400, 91, 1.8 * Math.PI, 1.2 * Math.PI);cxt.fill();cxt.stroke();cxt.closePath();//小口袋cxt.beginPath();cxt.fillStyle = '#fff';cxt.moveTo(130, 394);cxt.lineTo(270, 394);cxt.moveTo(130, 394);cxt.bezierCurveTo(130, 490, 270, 490, 270, 394);cxt.fill();cxt.stroke();cxt.closePath();//两只脚的空隙cxt.beginPath();cxt.fillStyle = '#fff';cxt.arc(200, 529, 20,Math.PI, 0);cxt.fill();cxt.stroke();cxt.closePath();//左脚cxt.beginPath();cxt.fillStyle='#fff';cxt.moveTo(180,528);cxt.lineTo(72,528);cxt.bezierCurveTo(52,528,52,558,72,558);cxt.lineTo(180,558);cxt.moveTo(180,558);cxt.bezierCurveTo(200,558,200,528,180,528);cxt.fill();cxt.stroke();cxt.closePath();//右脚cxt.beginPath();cxt.fillStyle='#fff';cxt.moveTo(220,528);cxt.lineTo(328,528);cxt.bezierCurveTo(348,528,348,558,328,558);cxt.lineTo(220,558);cxt.moveTo(220,558);cxt.bezierCurveTo(200,558,200,528,220,528);cxt.fill();cxt.stroke();cxt.closePath();
</script>

效果图：