HTML5--Canvas

最新推荐文章于 2023-09-22 23:16:21 发布

Ellis_wong

最新推荐文章于 2023-09-22 23:16:21 发布

阅读量603

点赞数

分类专栏： HTML5

本文链接：https://blog.csdn.net/yu1989226/article/details/8980272

版权

HTML5 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Canvas -是HTML5中的一个新增的元素，简单理解为一块画板。

Canvas必要的属性:ID,Width,Height ,这三个属性都是Canvas必要的，ID表示这块画板的名称，作为HTML中的标记Canvas的唯一标识，Width，Height分别表示画板的长，宽。

操作画板的过程：

1.取得Canvas元素

var canvas=document.getElementByID("iD");

2.取得上下文Context,上下文封装了很多绘制图功能的对象

var context=var context=canvas.getContext('2d');

3.设置绘制图像的样式

context.fillStyle=""; //设置填充的颜色

context.strokeStyle="" 设置图形边框的颜色

Context.FillRect(x,y,Width,Height);//绘制矩形

x,y---->表示图形的x轴 y轴

width，height---->表示图形的长款

例子：

下面写了一个简单的例子，是循环绘制矩形

前台HTML+JS

<!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>无标题文档</title>
<script type="text/javascript">
 function draw(id){
	 var canvas=document.getElementById(id);
	 if(canvas==null)
	 {
		 return false;
     }
	 var context=canvas.getContext('2d');
	  context.fillStyle='#EEEEEF';
	  context.fillRect(0,0,430,300);
	  var colorlist=[];
	  colorlist.push("#EEC591");
	  colorlist.push("#FF00FF");
	  colorlist.push("#FF0000");
	  colorlist.push("#EEC591");
	  colorlist.push("#EEEE00");
	  colorlist.push("#EE9A00");
	  colorlist.push("#EE6AA7");
	  colorlist.push("#EE3B3B");
	  colorlist.push("#BCEE68");
	   colorlist.push("#B22222");
	   var x=0;
	   var y=0;
	   var width=400;
	   var height=300;
	  for(var i=0;i<10;i++)
	  {
		  context.fillStyle=colorlist[i];
		  context.fillRect(x,y,width,height);
		  x+=10;
		  y+=10;
		  width-=20;
		  height-=20;
		  } 
	 }
</script>
</head>

<body οnlοad="draw('canvas')">
<canvas id="canvas" width="430" height="300"  ></canvas>
</body>
</html>