利用canvas标签在网页上绘制图像

HTML5画布元素——<canvas>，通过JavaScript在网页上绘制图像。


1、规定canvas画布大小（宽200，高100）：

<canvas id="myCanvas" width="200" height="100"></canvas>

2、用JavaScript来绘制图像：（以下绘制出一个红色的矩形）
<script type="text/javascript">
var c=document.getElementById("myCanvas");      //获取canvas元素。
var cxt=c.getContext("2d");      /*getContext()方法返回一个用于在画布上绘图的环境。"2d"指定了二维绘图，并且导致这个方法返回一个环境对象，该对象导出一个二维绘图 API。*/
cxt.fillStyle="#FF0000";      //fillStyle方法指定矩形为红色。
cxt.fillRect(0,0,150,75);      /*fillRect方法中，参数（0,0,150,75）表示从左上角开始在画布上绘制 一个150x75 的矩形。*/

</script>

最后得到这样一个矩形：

（代码转自w3school）