3、<canvas> 标签:定义图形,比如图表和其他图像。
HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。
因为 canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成:
该标签只是图形容器,画布是一个矩形区域,使用者可以控制其每一像素,但必须使用脚本来绘制图形。
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
语法:<canvas height="pixels" />
注释:Internet Explorer 8 以及更早的版本不支持 <canvas> 标签。
提示:如果无法显示出画布将会显示出该标签之间内的文本值;
例:通过 canvas 元素来显示一个红色的矩形:
<canvas id="Canvas">your browser does not support the canvas tag </canvas>
<script type="text/javascript">
JavaScript 使用 id 来寻找 canvas 元素:
var canvas=document.getElementById('Canvas');
然后,创建 context 对象:
var ctx=canvas.getContext('2d');
getContext("2d") 对象是内建的 HTML5 对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
下面的两行代码绘制一个红色的矩形:
fillStyle 方法将其染成红色,fillRect 方法规定了形状、位置和尺寸。
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,150);
</script>
fillRect值:x,y,w,h;
意思是:在画布上绘制 80x150 的矩形,从左上角开始 (0,0)。
属性 值 描述
height pixels 设置 canvas 的高度。
width pixels 设置 canvas 的宽度。
例:如何通过重设 width 或 height 属性来清空画布(使用 JavaScript)。
<canvas id="Canvas" width="200" height="200" style="border:1px solid">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("Canvas"); var cxt=c.getContext("2d");
cxt.fillStyle="#92B901"; cxt.fillRect(50,50,100,100);
function clearCanvas() { c.height=c.height; }
</script> <br />
<button onclick="clearCanvas()">清空画布</button>
提示:每当画布的高度或宽度被重设时,画布内容就会被清空(请看页面底部的例子)。
例:把鼠标悬停在下面的矩形上可以看到坐标;
<head>
<style type="text/css">
body { font-size: 70%; font-family: verdana,helvetica,arial,sans-serif;
margin:0px; }
</style>
<script type="text/javascript">
function cnvs_GetCoordinates(e){ x=e.clientX; y=e.clientY;
document.getElementById("XYcoordinates").innerHTML="Coordinates: ("+x+","+y+")";
}
function cnvs_ClearCoordinates(){document.getElementById("XYcoordinates").innerHTML="";}
</script>
</head>
<body>
<p>把鼠标悬停在下面的矩形上可以看到坐标:</p>
<div id="coordiv" style="float:left;width:199px;height:99px;border:1px solid #c3c3c3" onmousemove="cnvs_GetCoordinates(event)" onmouseout="cnvs_ClearCoordinates()"></div>
<br /><br /><br />
<div id="XYcoordinates"></div>
</body>
画布的 X 和 Y 坐标用于在画布上对绘画进行定位。应为截图原因,所以鼠标无法出现;
例:线条:通过指定从何处开始,在何处结束,来绘制一条线:
<canvas id="Canvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("Canvas"); var cxt=c.getContext("2d");
cxt.moveTo(10,10); cxt.lineTo(150,50);
cxt.lineTo(10,50); cxt.stroke();
</script>
例:圆形:通过规定尺寸、颜色和位置,来绘制个圆:
<canvas id="Canvas" width="100" height="50" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("Canvas"); var cxt=c.getContext("2d");
cxt.fillStyle = "#c3c3c3"; cxt.beginPath();
cxt.arc(70, 18, 15, 0, Math.PI * 2, true);核心:Math.PI * 2 控制形状:圆形
cxt.arc(10, 9, 7.5, 0, Math.PI * 2, true); cxt.closePath();
cxt.fill();
</script>
例:渐变:通过个人指定的颜色来绘制渐变背景;
<canvas id="Canvas" width="175" height="60" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("Canvas"); var cxt=c.getContext("2d");
var grd=cxt.createLinearGradient(0,0,150,50);
grd.addColorStop(0,"#fff"); grd.addColorStop(1,"#000");
cxt.fillStyle=grd; cxt.fillRect(0,0,175,50);
</script>
例:图像:把一副图像放置在画布上;
<canvas id="Canvas" width="445" height="250" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("Canvas"); var cxt=c.getContext("2d");
var img=new Image(); img.src="/Content/images/timg.jpg";
cxt.drawImage(img,0,0);
</script>
如果在代码没有出错的前提下,图像无法显示,说明图像路径有误;img.src="~/Content/images/timg.jpg";
这样是错误的输入。
借鉴于W3CSchool文档;