HTML5画布

HTML5学习 admin 214浏览

画布:画布是一个矩形区域,您可以控制其每一像素;canvas拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<canvas id="canvas" width="400px" height="400px"></canvas>
		<script type="text/javascript">
			var c=document.getElementById("canvas");
			var cxt=c.getContext("2d");
			//cxt.fillStyle="#FF0000";
			// cxt.fillRect(0,0,100,100);
			
			// cxt.fillStyle="#FF0000";
			// cxt.beginPath();
			// cxt.arc(70,18,15,0,Math.PI*2,true);
			// cxt.closePath();
			// cxt.fill();
			
			var img=new Image();
			img.onload=function(){
				cxt.drawImage(img,0,0);
			}
			img.src="./raw/face.jpg";
		</script>
	</body>
</html>

转载请注明:大灰牛博客 » HTML5画布