canvas详解

时间:2022-07-28
本文章向大家介绍canvas详解，主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style type="text/css">
		*{padding: 0px;margin: 0px;}
		body
		{
			background: yellow;
		}
		canvas
		{
			background: white;
		}
	</style>
</head>
<body>
	<canvas width="500" height="500" id="canvas">nonono,浏览器不行.</canvas>
	<script type="text/javascript">
		var canvas=document.querySelector("#canvas");
		var obj=canvas.getContext("2d");
		obj.beginPath();
		obj.strokeStyle="blue";
		obj.lineWidth=5;
		obj.moveTo(50,50);
		obj.lineTo(100,100);
		obj.lineTo(110,110);
		obj.lineTo(220,400);
		obj.stroke();
		obj.beginPath();
		obj.lineWidth=5;
		obj.strokeStyle="red";
		obj.moveTo(220,400);
		obj.lineTo(220,500);
		obj.stroke();
	</script>
</body>
</html>

什么情况下重开路径,不同颜色2的情况下。长度由位置。

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		*{margin: 0;padding: 0;list-style: none;}
		body{
			background: black;
		}
		canvas{
			background: white;
		}
	</style>
</head>
<body>
<canvas width="500" height="500" id="canvas">您的浏览器版本过低，请更新浏览器</canvas>
<input type="color" id="color">
<input type="range" id="range">
<script type="text/javascript">
	var obj=canvas.getContext("2d");
	color.oninput=function()
	{
		obj.strokeStyle=this.value;
	}
	range.oninput=function()
	{
		obj.lineWidth=this.value;
	}
	canvas.onmousedown=function(e)
	{
		var ev=e||window.event;
		obj.beginPath();
		obj.moveTo(ev.clientX,ev.clientY);
		document.onmousemove=function(e)
		{
			var ev=e||window.event;
			obj.lineTo(ev.clientX,ev.clientY);
			obj.stroke();
		}
		document.onmouseup=function()
		{
			document.onmousemove=document.onmouseup=null;
		}
		return false;
	}
</script>
</body>
</html>

核心：按下的与移动完毕的链接到一起就行了。并且要记住，抬起就null，为什么，像是冲洗开一条路径把。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style type="text/css">
		*{margin: 0;padding: 0;list-style: none;}
		body{
			background: black;
			cursor: url(1.cur),auto;
		}
		canvas{
			background: white;
		}
	</style>
</head>
<body>
	<canvas width=500 height=500 id='canvas'>您的浏览器版本过低，请更新浏览器</canvas>
	<script type="text/javascript">
		function random(min,max){//5-10 56789
	//console.log(min,max)
	return parseInt(min+Math.random()*(max-min));
}//随机算法.
obj=canvas.getContext("2d");
setInterval(function()
	{
		obj.beginPath();
		obj.lineWidth=random(1,10);
		obj.strokeStyle="rgb("+random(0,256)+","+random(0,256)+","+random(0,256)+")";
		obj.moveTo(random(0,canvas.width),random(0,canvas.height));
		obj.lineTo(random(0,canvas.width),random(0,canvas.height));
		obj.stroke();
	},10);
	</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style type="text/css">
		*{margin: 0;padding: 0;list-style: none;}
body{
	background: black;
	cursor: url(1.cur),auto;
}
canvas{
	background: white;
}
	</style>
</head>
<body>
	<canvas width=500 height=500 id='canvas'>您的浏览器版本过低，请更新浏览器</canvas>
<script type="text/javascript">
	obj=canvas.getContext("2d");
	obj.beginPath();
	obj.rect(50,50,200,100);//位置 宽高
	obj.strokeStyle="red";
	obj.lineWidth=20;
	obj.fillStyle="yellow";
	obj.fill();
	obj.stroke();
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style type="text/css">
		*{margin: 0;padding: 0;list-style: none;}
body{
	background: black;
	cursor: url(1.cur),auto;
}
canvas{
	background: white;
}
	</style>
</head>
<body>
	<canvas width=500 height=500 id='canvas'>您的浏览器版本过低，请更新浏览器</canvas>
<script type="text/javascript">
	obj=canvas.getContext("2d");
	obj.beginPath();
	obj.rect(50,50,200,100);
	obj.strokeStyle="red";
	obj.lineWidth=20;
	obj.fillStyle="yellow";
	obj.fill();
	obj.stroke();
	obj.beginPath();
	obj.clearRect(0,0,200,170);
	obj.stroke();
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style type="text/css">
		*{margin: 0;padding: 0;list-style: none;}
body{
	background: black;
	cursor: url(1.cur),auto;
}
canvas{
	background: white;
}
	</style>
</head>
<body>
	<canvas width=500 height=500 id='canvas'>您的浏览器版本过低，请更新浏览器</canvas>
	<script type="text/javascript">
		var offset={
			x:50,
			y:50
		};
		obj=canvas.getContext("2d");
		obj.beginPath();
		obj.rect(offset.x,offset.y,200,100);
		obj.strokeStyle="blue";
		obj.lineWidth=1;
		obj.fillStyle="red";
		obj.fill();
		obj.stroke();
		canvas.onmousedown=function(e)
		{
			var ev=e||event;
			var l=ev.clientX-offset.x;
			var t=ev.clientY-offset.y;
			document.onmousemove=function(e)
			{
				var ev=e||event;
				clear();
				obj.beginPath();
				obj.rect(ev.clientX-l,ev.clientY-t,200,100);
				obj.strokeStyle="blue";
				obj.lineWidth=1;
				obj.fillStyle="red";
				obj.fill();
				obj.stroke();
			};
			document.onmouseup=function(e)
			{
				offset.x=e.clientX-l;
				offset.y=e.clientY-t;
				this.onmousemove=this.onmouseup=null;
			};
			return false;
		}
		function clear()
		{
			obj.beginPath();
			obj.clearRect(0,0,canvas.width,canvas.height);
			obj.stroke();
		}
	</script>
</body>
</html>

核心在于；

offset.x=e.clientX-l;
				offset.y=e.clientY-t;，

不然up后重新跑到50 50的位置，而加上这一句就会到up时的地方重新开始拖放.

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		*{margin: 0;padding: 0;list-style: none;}
		body{
			background: black;
			cursor: url(1.cur),auto;
		}
		canvas{
			background: white;

		}
	</style>
</head>
<body>
	<canvas width="500" height="500" id="canvas">您的浏览器版本过低，请更新浏览器</canvas>
<script type="text/javascript">
	var obj=canvas.getContext("2d");
	var img=new Image();
	img.onload=function()
	{
		obj.beginPath();
		obj.drawImage(img,0,0,55,37,200,200,55,37);/*对象  图的什么地方开始(0,0),图显示的宽高(55,37).画在canvas的哪一个位置(200,200),画多大的。(55,37)*/
		obj.stroke();
	}
	img.onerror=function()
	{
		alert(1);
	}
	img.src="fish1.png";
</script>

</body>
</html>
<!doctype html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title></title> 
    <style type="text/css">
*{margin: 0;padding: 0;list-style: none;}
body{
	background: black;
	cursor: url(1.cur),auto;
}
canvas{
	background: white;
}

    </style>
</head>
<body>

<canvas width=500 height=500 id='canvas'>您的浏览器版本过低，请更新浏览器</canvas>

<script type="text/javascript">

	var obj = canvas.getContext('2d');
	var img = new Image();
	//console.log(img)

	var i = 0;
	var a = 0;
	img.onload = function(){
		//alert(2);
		setInterval(function (){
			obj.beginPath();
			a++;
			obj.clearRect(0,0,canvas.width,canvas.height);
			obj.stroke();


			if(i == 4)i = 0;
			obj.beginPath();
		//console.log(obj)
			obj.drawImage(img,0,37*i,55,37,100+a*1.213,100,55,37);
			i++;
			obj.stroke();
		},100);
		
	};
	img.onerror = function(){
		alert(1);
	}
	img.src='fish1.png';

</script>
</body>
</html>

核心在于:obj.clearRect(0,0,canvas.width,canvas.height);原因是先清除·之前的就有一种动的感觉了.

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>

<script>

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(100,75,50,0,2*Math.PI);
ctx.stroke();

</script> 

</body>
</html>

人是圆的半径。

随机文章
本站知识点必读
最近更新