canvas

HTML5 <canvas> 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成.

<canvas> 标签只是图形容器，您必须使用脚本来绘制图形

<canvas id="myCanvas" width="200" height="100"style="border:1px solid #000000;"></canvas>

<script>

var c=document.getElementById("myCanvas");<!--找到canvas元素-->

var ctx=c.getContext("2d");<!--创建canvas对象-->

ctx.fillStyle="#FF0000";<!--绘制一个红色的矩形-->

ctx.fillRect(0,0,150,75);<!--在画布上绘制150x75的矩形，从左上角（0,0）开始-->

</script>

设置fillStyle属性可以是CSS颜色，渐变，或图案。fillStyle 默认设置是#000000（黑色）。

fillRect(x,y,width,height) 方法定义了矩形当前的填充方式。