Html 5 新元素

Canvas

用于图形的绘制，通过脚本 (通常是JavaScript)来完成.
只是图形容器，您必须使用脚本来绘制图形
即–>创建一个画布
注意: 默认情况下 元素没有边框和内容。

<canvas id="myCanvas" width="200" height="100" 
	style="border:1px solid #000000;">
	您的浏览器不支持 HTML5 canvas 标签。
</canvas>

<script>

var c=document.getElementById("myCanvas");
//获得 2d 上下文对象
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
//绘制矩形
ctx.fillRect(0,0,150,75);

</script>

< canvas >只支持一种原生的图形绘制：矩形。
提供了三种方法绘制矩形：

• 1、fillRect(x, y, width, height)：绘制一个填充的矩形。
• 2、strokeRect(x, y, width, height)：绘制一个矩形的边框。
• 3、clearRect(x, y, widh, height)：清除指定的矩形区域，然后这块区域会变的完全透明。

这 3 个方法具有相同的参数 :

• x, y：指的是矩形的左上角的坐标。(相对于canvas的坐标原点)
• width, height：指的是绘制的矩形的宽和高

​ 如果想要给**图形上色**，有两个重要的属性可以做到。

• fillStyle = color 设置图形的填充颜色
• strokeStyle = color 设置图形轮廓的颜色