搭建绘画环境
1. 设置两个Div，分别获取页面中的x,y坐标
html代码：<canvas id="cv_1" width="500" height="600"></canvas> <div id="div1"></div> <div id="div2"></div>
css代码：div{ top: 500px; border: 1px solid red; width: 50px; height: 50px; }
var div1 = document.getElementById('div1');
var div2 = document.getElementById('div2');
var cv_1 = document.getElementById('cv_1');
var can = cv_1.getContext('2d'); //搭建绘画2D环境
var x = cv_1.getBoundingClientRect().left;
var y = cv_1.getBoundingClientRect().top;
window.onmousemove= function(event){
move(event)}
function move(event){
var bdx = event.clientX - x;
var bdy = event.clientY - y;
div1.innerHTML = bdx;
div2.innerHTML = bdy;
}
出来的效果：第一个div中为x坐标，第二个为y坐标
2.绘制哆啦A梦
1.绘制脑袋
can.beginPath();
can.arc(200,175,175, 0.7 * Math.PI, 0.3 * Math.PI);
can.fillStyle = '#71c5f3';
can.closePath();
can.fill();
can.stroke();
效果如下：
2.绘制脸蛋
can.beginPath();
can.moveTo(110,110)
can.quadraticCurveTo(-10, 200, 120, 316);
can.lineTo(280,316);
can.quadraticCurveTo(410,210,290,110);
can.lineTo(110,110)
can.fillStyle = '#fff';
can.fill();
can.stroke();
效果如下：
3.绘制左右眼睛
//左眼睛
can.beginPath();
can.moveTo(110,110);
can.bezierCurveTo(110,25,200,25,200,100);
can.bezierCurveTo(200,175,110,175,110,100);
can.fillStyle = '#fff';
can.closePath();
can.fill();
can.stroke();
//右眼睛
can.beginPath();
can.moveTo(200,100);
can.bezierCurveTo(200,25,290,25,290,100);
can.bezierCurveTo(290,175,200,175,200,100);
can.fillStyle = '#fff';
can.closePath();
can.fill();
can.stroke();
效果图如下：
4.绘制左右眼球，左右眼珠
//右眼球
can.beginPath();
can.arc(230,130,12,0,2*Math.PI);
can.fillStyle = '#000';
can.fill();
can.stroke();
//右眼珠
can.beginPath();
can.arc(225,130,5,0,2*Math.PI);
can.fillStyle = '#fff';
can.fill();
//左眼球
can.beginPath();
can.arc(170,130,12,0,2*Math.PI);
can.fillStyle = '#000';
can.fill();
can.stroke();
//左眼珠
can.beginPath();
can.arc(175,130,5,0,2*Math.PI);
can.fillStyle = '#fff';
can.fill();
效果图如下：
5.绘制鼻子
//鼻子
can.beginPath();
can.arc(200,165,25,0,2*Math.PI);
can.fillStyle = '#f16776';
can.closePath();
can.fill();
can.stroke();
效果如下：
6.绘制左右胡须
//胡须
//左边的胡须
can.beginPath();
can.moveTo(80,175);
can.lineTo(150,195);
can.moveTo(80,200);
can.lineTo(150,205);
can.moveTo(80,225);
can.lineTo(150,215);
//中间的胡须
can.moveTo(200,190);
can.lineTo(200,250);
//右边的胡须
can.moveTo(250, 195);
can.lineTo(320, 175);
can.moveTo(250, 205);
can.lineTo(320, 200);
can.moveTo(250, 215);
can.lineTo(320, 225);
can.stroke();
效果图如下：
7.绘制嘴巴
//嘴巴
can.beginPath()
can.moveTo(150,250);
can.lineTo(250,250);
can.moveTo(250,250);
can.bezierCurveTo(250,325,150,325,150,250);
can.fillStyle = '#f16776';
can.fill();
can.stroke();
效果图如下：
8.绘制围巾
//围巾
can.beginPath();
can.moveTo(96,316);
can.lineTo(320,316);
can.arcTo(330,316,330,326,10);//在画布上创建介于两个切线之间的弧，起点坐标为(330,316),终点坐标为(330,326),半径为10
can.lineTo(330,336);
can.arcTo(330,346,305,346,10);
can.lineTo(81,346);
can.arcTo(71,346,71,336,10);
can.lineTo(71,326);
can.arcTo(71,316,81,316,10);
can.lineTo(96,316);
can.fillStyle = '#f16776';
can.fill();
can.stroke();
效果图如下：
9.绘制左右身体
//身体
can.beginPath();
can.moveTo(80,346);
//左边
can.lineTo(26,406);
can.lineTo(26, 406);
can.lineTo(65, 440);
can.lineTo(85, 418);
can.lineTo(85, 528);
can.lineTo(185, 528);
//右衣服
can.lineTo(315, 528);
can.lineTo(315, 408);
can.lineTo(400, 358);
can.lineTo(375, 315);
can.lineTo(320, 346);
can.fillStyle = '#71c5f3';
can.fill();
can.stroke();
10.绘制左右手
//左手
can.beginPath();
can.arc(37, 433, 30, 0, 2 * Math.PI);
can.fillStyle = '#fff';
can.fill();
can.stroke();
//右手
can.beginPath();
can.arc(385, 335, 30, 0, 2 * Math.PI);
can.fillStyle = '#fff';
can.fill();
can.stroke();
效果图如下：
11.肚子口袋铃铛
//肚子
can.beginPath();
can.arc(200,400,91,1.8*Math.PI,1.2*Math.PI);
can.fillStyle = '#fff';
can.fill();
can.stroke();
//口袋
can.beginPath();
can.arc(200,400,40,0,Math.PI);
can.moveTo(160,400);
can.lineTo(240,400);
can.fillStyle = '#f16776';
can.fill();
can.stroke();
//铃铛
can.beginPath();
can.arc(200,346,15,0,2*Math.PI);
can.fillStyle = 'yellow';
can.fill();
can.stroke();
can.beginPath();
can.arc(200,346,5,0,2*Math.PI);
can.moveTo(200,350);
can.lineTo(200,360);
can.fillStyle = '#663333';
can.fill();
can.stroke();
效果图如下
12.腿之间的空隙
//腿之间的空隙
can.beginPath();
can.arc(200, 529, 20,Math.PI,0);
can.fillStyle = '#fff';
can.fill();
can.stroke();
13.左右腿
//左脚
can.beginPath();
can.moveTo(185,528);
can.lineTo(80,528);
can.bezierCurveTo(40,570,220,570,185,528);
can.stroke();
//右脚
can.beginPath();
can.moveTo(320,528);
can.lineTo(215,528);
can.bezierCurveTo(175,570,360,570,320,528);
can.stroke();
效果图如下：
