canvas初级复习，简单绘图-CSDN博客

本文链接：https://blog.csdn.net/lyf08600231/article/details/8778192

本文介绍了一种使用HTML5 Canvas和jQuery结合的方式绘制一个可爱的卡通熊的方法。文章详细讲解了如何通过JavaScript操作Canvas来实现头部、耳朵、眼睛及嘴巴等元素的绘制过程，并通过具体的坐标和颜色设置来完成整个卡通形象的设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>my house</title>
<script type="text/javascript" src="jquery-1.5.2.min.js"></script>
<script>
	
	$(document).ready(function(){
	bear();
	});
	
	function bear(){
		var canvas=$("#myCanvas");
	    var context=canvas.get(0).getContext("2d");	
		/************填满浏览器******************/
		canvas.attr("width",$(window).get(0).innerWidth);
		canvas.attr("height",$(window).get(0).innerHeight);
		context.fillRect(0,0,canvas.width,canvas.height);

		/************绘制头******************/
		var headX=400;
		var headY=200;
		var headR=90;
		context.beginPath();
		context.strokeStyle="#f00";
		context.arc(headX,headY,headR,0,Math.PI*2,false);//绘制圆
		context.closePath();
		context.stroke();
		
		/************绘制左耳朵******************/
		var x1=headX-2*headR/3, //控制点1的x坐标
		y1 = headY-5*headR/4, //控制点1的y
		x2 = headX-5*headR/3, //控制点2的x
		y2 = headY-headR/2,//控制点2的y
		x = headX-14*headR/15, //终点x
		y = headY-headR/4;//终点y
		x0=headX-7*headR/10;//起点
		y0=headY-3*headR/4;
		context.moveTo(x0,y0);
		context.beginPath();
		context.lineWidth = 5;
		context.strokeStyle = "rgba(0,0,0,1)"
		context.moveTo(x0,y0);
		context.bezierCurveTo(x1,y1,x2,y2,x,y);
		context.stroke();
		/************绘制右耳朵******************/
		var x1=headX+2*headR/3, //控制点1的x坐标
		y1 = headY-5*headR/4, //控制点1的y
		x2 = headX+5*headR/3, //控制点2的x
		y2 = headY-headR/2,//控制点2的y
		x = headX+14*headR/15, //终点x
		y = headY-headR/4;//终点y
		x0=headX+7*headR/10;
		y0=headY-3*headR/4;
		context.moveTo(x0,y0);
		context.beginPath();
		context.lineWidth = 5;
		context.strokeStyle = "rgba(0,0,0,1)"
		context.moveTo(x0,y0);
		context.bezierCurveTo(x1,y1,x2,y2,x,y);
		context.stroke();
		
		/************绘制眼睛******************/
		var eyex=headX-5*headR/12;
		eyey=headY-10;
		eyer=headR/5;
		context.beginPath();
		context.lineWidth = 1;
		context.strokeStyle="#f00";
		context.arc(eyex,eyey,eyer,0,Math.PI*2,false);//绘制圆
		context.arc(eyex,eyey,eyer/2,0,Math.PI*2,false);//绘制圆
		context.closePath();
		context.stroke();
		var eyex=headX+5*headR/12;
		eyey=headY-10;
		eyer=headR/5;
		context.beginPath();
		context.lineWidth = 1;
		context.strokeStyle="#f00";
		context.arc(eyex,eyey,eyer,0,Math.PI*2,true);//绘制圆
		context.arc(eyex,eyey,eyer/2,0,Math.PI*2,true);//绘制圆
		context.closePath();
		context.stroke();
		
		/************绘制嘴巴******************/
		var mouthx=headX;
		mouthy=headY+headR/2;
		mouthr=headR/5;
		context.beginPath();
		context.lineWidth = 1;
		context.strokeStyle="#f000";
		context.arc(mouthx,mouthy,mouthr,Math.PI,Math.PI*2,true);//绘制圆
		context.closePath();
		context.stroke();
		}
</script>
</head>

<body>
<canvas id="myCanvas" width="500" height="500">
</body>
</html>