Construye un ambiente de pintura
1. Configure dos Divs y obtenga las coordenadas xey en la página respectivamente
código html: <canvas id="cv_1" width="500" height="600"></canvas> <div id="div1"></div> <div id="div2"></div>
código 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;
}
El efecto resultante: el primer div es la coordenada x y el segundo es la coordenada y
2. Dibuja a Doraemon
1. Dibuja la cabeza
can.beginPath();
can.arc(200,175,175, 0.7 * Math.PI, 0.3 * Math.PI);
can.fillStyle = '#71c5f3';
can.closePath();
can.fill();
can.stroke();
El efecto es el siguiente:
2. Dibuja la cara
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();
El efecto es el siguiente:
3. Dibuja los ojos izquierdo y derecho
//左眼睛
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();
Las representaciones son las siguientes:
4. Dibuja globos oculares izquierdo y derecho, globos oculares izquierdo y derecho
//右眼球
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();
Las representaciones son las siguientes:
5. Dibuja la nariz
//鼻子
can.beginPath();
can.arc(200,165,25,0,2*Math.PI);
can.fillStyle = '#f16776';
can.closePath();
can.fill();
can.stroke();
El efecto es el siguiente:
6. Dibuja las barbas izquierda y derecha.
//胡须
//左边的胡须
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();
Las representaciones son las siguientes:
7. Dibuja la boca
//嘴巴
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();
Las representaciones son las siguientes:
8. Dibuja la bufanda
//围巾
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();
Las representaciones son las siguientes:
9. Dibuja el cuerpo izquierdo y derecho
//身体
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. Dibuja las manos derecha e izquierda
//左手
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();
Las representaciones son las siguientes:
11. Campanas para el bolsillo del vientre
//肚子
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();
El diagrama de efectos es el siguiente
12.La brecha entre las piernas
//腿之间的空隙
can.beginPath();
can.arc(200, 529, 20,Math.PI,0);
can.fillStyle = '#fff';
can.fill();
can.stroke();
13.Piernas izquierda y derecha
//左脚
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();
Las representaciones son las siguientes:
