canvas之画蓝胖子

2018-11-13 20:47:22  阅读 1646 次 评论 0 条

效果图：

QQ截图20181113205851.png

HTML代码：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">    
<meta name="viewport" content="height = device-height,width = device-width,initial-scale = 1.0,minimum-scale = 1.0,maximum-scale = 1.0,user-scalable = no">    
</head>
<body>
<div class="canvasBox">    
<canvas id="myCanvas" width="500" height="500" onmousemove="xy(event)" onmouseleave="clear()"></canvas>    
<span id="xy">x:115<br>y:494</span>    
</div>    
<style>    
	.canvasBox{    
		width: 500px;    
		height: 500px;    
		margin:40px auto;    
	}    
</style>    
<script type="text/javascript">    
	var Canvas = document.getElementById('myCanvas');    
	var CanvasId = Canvas.getContext('2d');    
	//创建头部    
	CanvasId.beginPath();//开始绘制    
	CanvasId.lineWidth = 1;    
	CanvasId.arc(250,70,70,0.7*Math.PI,0.3*Math.PI);    
	CanvasId.fillStyle="#0bb0da";//定义填充颜色    
	CanvasId.fill();//填充颜色    
	CanvasId.strokeStyle="#000" ;    
	CanvasId.stroke();    
	//绘制脸部    
	CanvasId.beginPath();//开始绘制    
	CanvasId.fillStyle = "#fff";    
	CanvasId.moveTo(220,40);    
	CanvasId.quadraticCurveTo(170, 100, 220, 125);//创建二次贝塞尔曲线,控制点(170,100),结束点(220,125)    
CanvasId.lineTo(280, 125);//添加一个新点，然后在画布中创建从（210，30）到（280，125）的线条    
CanvasId.quadraticCurveTo(330, 100, 280, 40);    
CanvasId.lineTo(220,40);    
	CanvasId.strokeStyle="#000" ;    
	CanvasId.fill();    
	CanvasId.stroke();    
	//绘制眼睛    
	CanvasId.beginPath();    
	CanvasId.fillStyle = "#fff";    
	//绘制左眼睛    
	CanvasId.moveTo(220,40);    
	CanvasId.bezierCurveTo(220,10,250,10,250,40);//绘制上半圆    
	CanvasId.bezierCurveTo(250,70,220,70,220,40);//绘制下半圆    
	//绘制右眼睛    
	CanvasId.moveTo(250,40);    
	CanvasId.bezierCurveTo(250,10,280,10,280,40);    
	CanvasId.bezierCurveTo(280,70,250,70,250,40);    
	CanvasId.fill();    
	CanvasId.stroke();    
	//绘制左眼球    
	CanvasId.beginPath();    
	CanvasId.fillStyle = "#000";    
	CanvasId.arc(240,50,5,0,2*Math.PI);    
	CanvasId.fill();    
	CanvasId.stroke();    
	//绘制右眼球    
	CanvasId.beginPath();    
	CanvasId.fillStyle = "#000";    
	CanvasId.arc(260,50,5,0,2*Math.PI);    
	CanvasId.fill();    
	CanvasId.stroke();    
	//绘制鼻子    
	CanvasId.beginPath();    
	CanvasId.fillStyle = "#d05823";    
	CanvasId.arc(250,68,10,0,2*Math.PI);    
	CanvasId.fill();    
	CanvasId.stroke();    
	//绘制鼻子之间的线    
	CanvasId.beginPath();    
	CanvasId.moveTo(250,80);    
	CanvasId.lineTo(250,100);    
	CanvasId.stroke();    
	//绘制左边上胡须    
	CanvasId.beginPath();    
	CanvasId.moveTo(210,80);    
	CanvasId.lineTo(240,85);    
	//绘制左边中间胡须    
	CanvasId.moveTo(210,90);    
	CanvasId.lineTo(240,90);    
	//绘制左边下面胡须    
	CanvasId.moveTo(210,100);    
	CanvasId.lineTo(240,95);    
	CanvasId.stroke();    
	//绘制右边上胡须    
	CanvasId.beginPath();    
	CanvasId.moveTo(260,85);    
	CanvasId.lineTo(290,80);    
	//绘制右边中间胡须    
	CanvasId.moveTo(260,90);    
	CanvasId.lineTo(290,90);    
	//绘制右边下面胡须    
	CanvasId.moveTo(260,95);    
	CanvasId.lineTo(290,100);    
	//绘制嘴巴    
	CanvasId.moveTo(220,110);    
	CanvasId.bezierCurveTo(220,120,280,120,280,110);    
	CanvasId.stroke();    
	//绘制围巾    
	CanvasId.beginPath();    
	CanvasId.moveTo(202,125);         // 创建开始点    
	CanvasId.lineTo(290,125);          // 创建水平线    
	CanvasId.arcTo(300,125,300,130,5); // 创建弧    
	CanvasId.arcTo(300,140,290,140,5); // 创建弧    
	CanvasId.lineTo(240,140);         // 创建垂直线    
	CanvasId.arcTo(200,140,200,135,5); // 创建弧    
	CanvasId.lineTo(200,130);         // 创建垂直线    
	CanvasId.arcTo(200,125,260,125,5); // 创建弧    
	CanvasId.lineTo(260,125);         // 创建垂直线    
CanvasId.fillStyle = '#b13209';    
CanvasId.fill();    
CanvasId.stroke();    
CanvasId.beginPath();    
CanvasId.fillStyle = '#0bb0da';    
CanvasId.moveTo(210,140);    
//绘制左边衣服    
CanvasId.lineTo(170,180);    
CanvasId.lineTo(189,199);    
CanvasId.lineTo(210,180);    
CanvasId.lineTo(210,230);    
CanvasId.lineTo(240,230);    
//绘制右边衣服    
CanvasId.lineTo(290,230);    
CanvasId.lineTo(290,180);    
CanvasId.lineTo(315,199);    
CanvasId.lineTo(334,180);    
CanvasId.lineTo(290,140);    
CanvasId.fill();    
CanvasId.stroke();    
//绘制肚子    
	CanvasId.beginPath();    
	CanvasId.fillStyle = "#FFF";    
	CanvasId.arc(250,159,33,1.8*Math.PI,1.2*Math.PI);    
	CanvasId.fill();    
	CanvasId.stroke();    
	//绘制百宝袋    
	CanvasId.beginPath();    
	CanvasId.fillStyle = "#FFF";    
	CanvasId.moveTo(230,160);    
	CanvasId.lineTo(270,160);    
	CanvasId.arc(250,159,20,0,1*Math.PI);    
	CanvasId.fill();    
	CanvasId.stroke();    
	//绘制铃铛    
CanvasId.beginPath();    
CanvasId.fillStyle = "#FF9912";    
CanvasId.arc(250,142,11,0,2*Math.PI);    
CanvasId.moveTo(241,135);    
CanvasId.lineTo(258,135);    
CanvasId.moveTo(240,139);    
CanvasId.lineTo(260,139);    
CanvasId.fill();    
CanvasId.stroke();    
CanvasId.beginPath();    
CanvasId.fillStyle = "#000";    
CanvasId.arc(250,145,3,0,2*Math.PI);    
CanvasId.moveTo(250,145);    
CanvasId.lineTo(250,153);    
CanvasId.fill();    
CanvasId.stroke();    
//绘制右手    
CanvasId.beginPath();    
	CanvasId.fillStyle = "#FFF";    
	CanvasId.arc(180,190,16,0,2*Math.PI);    
	CanvasId.fill();    
	CanvasId.stroke();    
	//绘制左手    
CanvasId.beginPath();    
	CanvasId.fillStyle = "#FFF";    
	CanvasId.arc(324,190,16,0,2*Math.PI);    
	CanvasId.fill();    
	CanvasId.stroke();    
	//绘制两个脚之间的空隙    
	CanvasId.beginPath();    
	CanvasId.fillStyle = "#fff";    
	CanvasId.moveTo(240,231);    
	CanvasId.bezierCurveTo(240,210,261,210,260,231);//绘制上半圆    
	CanvasId.fill();    
	CanvasId.stroke();    
	//绘制左脚    
	CanvasId.beginPath();    
	CanvasId.fillStyle = '#fff';    
	CanvasId.moveTo(202,230);         // 创建开始点    
CanvasId.lineTo(240,230);    
CanvasId.bezierCurveTo(246,230,248,240,242,245);    
CanvasId.moveTo(242,245);         // 创建开始点    
CanvasId.lineTo(202,245);    
CanvasId.bezierCurveTo(195,240,195,235,202,230);    
//绘制右脚    
CanvasId.moveTo(257,230);         // 创建开始点    
CanvasId.lineTo(294,230);    
CanvasId.bezierCurveTo(300,235,300,240,295,245);    
CanvasId.moveTo(295,245);         // 创建开始点    
CanvasId.lineTo(257,245);    
CanvasId.bezierCurveTo(252,240,252,234,257,230);    
CanvasId.fill();    
CanvasId.stroke();    
function xy(e) {    
   	var xy = document.getElementById('xy');    
   	xy.innerHTML = 'x:'+e.offsetX+'<br>y:'+e.offsetY;    
}    
function clear(){    
   	var xy = document.getElementById('xy');    
   	xy.innerHTML = '';    
}    
</script>    
</body></html>

微信扫码查看本文
本文地址：https://www.yangguangdream.com/?id=2008
版权声明：本文为原创文章，版权归 编辑君 所有，欢迎分享本文，转载请保留出处！

发表评论


表情

还没有留言，还不快点抢沙发？