用canvas画罗小黑

canvas是一个极度好用的画图控件，canvas可以创建出自己设计的图形，其灵活性很强。学习资料在w3cSchool中有下方为学习链接

https://www.w3school.com.cn/tags/html_ref_canvas.asp

下面是画罗小黑的代码

本人只在google中测试，如需要使用此控件用于商业用途请记得考虑浏览器兼容性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				text-align: center;
				margin-top: 250px;
			}
			#canvas_1{
				border: 1px solid #ccc;
			}
		</style>
	</head>
	<body>
		<body>
			<canvas id="canvas_1" width="800" height="600">
			
			</canvas>
		</body>
	</body>
</html>
<script type="text/javascript">
	function getPixelRatio(context) {
    var backingStore = context.backingStorePixelRatio 
    || context.webkitBackingStorePixelRatio 
    || context.mozBackingStorePixelRatio 
    || context.msBackingStorePixelRatio 
    || context.oBackingStorePixelRatio 
    || context.backingStorePixelRatio || 1;
    return (window.devicePixelRatio || 1) / backingStore;
 
	};
 
	

	var canvas_1=document.getElementById("canvas_1");
	var fun_can=canvas_1.getContext('2d');
	var ratio = getPixelRatio(fun_can);
	fun_can.width = 800*ratio;
	fun_can.height = 600*ratio;
	
		//耳朵
	
	fun_can.beginPath();
	fun_can.moveTo(122,129);
	fun_can.lineTo(87,94);
	fun_can.lineTo(104,181);
	fun_can.closePath()
	fun_can.strokeStyle="#3d2d1e";
	fun_can.lineWidth=10;
	fun_can.fillStyle="#b1d49a";
	fun_can.stroke();
	fun_can.fill();
	fun_can.beginPath();
	fun_can.moveTo(122,129);
	fun_can.lineTo(87,83);
	fun_can.lineTo(151,110);
	fun_can.closePath();
	fun_can.lineWidth=10;
	fun_can.strokeStyle="#3d2d1e";
	fun_can.fillStyle="#000000";
	fun_can.stroke();
	fun_can.fill();
	
	
	fun_can.beginPath();
	fun_can.moveTo(258,129);
	fun_can.lineTo(293,94);
	fun_can.lineTo(276,181);
	fun_can.closePath()
	fun_can.strokeStyle="#3d2d1e";
	fun_can.lineWidth=10;
	fun_can.fillStyle="#b1d49a";
	fun_can.stroke();
	fun_can.fill();
	fun_can.beginPath();
	fun_can.moveTo(258,129);
	fun_can.lineTo(293,83);
	fun_can.lineTo(229,110);
	fun_can.closePath();
	fun_can.lineWidth=10;
	fun_can.strokeStyle="#3d2d1e";
	fun_can.fillStyle="#000000";
	fun_can.stroke();
	fun_can.fill();
	<!--190 181-->
	//头
	fun_can.beginPath();
	fun_can.fillStyle="#ffff00";
	fun_can.ellipse(190,181,90,81,0,0,2*Math.PI);
	fun_can.strokeStyle="#3d2d1e"
	fun_can.lineWidth=5;
	fun_can.fillStyle="#000000";
	fun_can.fill();
	fun_can.stroke();
	fun_can.beginPath();
	fun_can.ellipse(145,181,35,57,0,0,2*Math.PI);
	fun_can.strokeStyle="#3d2d1e";
	fun_can.lineWidth=5;
	fun_can.fillStyle="#fefad5";
	fun_can.fill();
	fun_can.stroke();
	fun_can.beginPath();
	fun_can.lineWidth=5;
	fun_can.strokeStyle="#3d2d1e"
	fun_can.fillStyle="#000000"
	fun_can.ellipse(145,181,20,27,0,0,2*Math.PI);
	fun_can.fill();
	fun_can.stroke();
	fun_can.beginPath();
	fun_can.ellipse(235,181,35,57,0,0,2*Math.PI);
	fun_can.strokeStyle="#3d2d1e";
	fun_can.lineWidth=5;
	fun_can.fillStyle="#fefad5";
	fun_can.fill();
	fun_can.stroke();
	
	fun_can.beginPath();
	fun_can.lineWidth=5;
	fun_can.strokeStyle="#3d2d1e"
	fun_can.fillStyle="#000000"
	fun_can.ellipse(235,181,20,27,0,0,2*Math.PI);
	fun_can.fill();
	fun_can.stroke();

</script>

猜你喜欢