首页 > 代码库 > HTML5的绘画支持(一)

HTML5的绘画支持(一)

1、使用canvas元

      HTML5新增了一个<canvas.../>元素,该元素专门用于绘制图形。但实际上<canvas.../>元素自身并不绘制图形,它只是相当于一张空画布。必须要用javascript脚本进行绘制。

      在html页面上定义<canvas.../>与定义其它普通元素并无任何不同,为了向<canvas.../>元素上绘图,必须经过如下三个步骤:

      1、获取<canvas.../>元素对应的dom对象,这是一个canvas对象。

      2、调用canvas对象的getContext方法,该方法返回一个CanvasRenderingContext2D对象,该对象可以绘制图形。

      3、调用CanvasRenderingContext2D对象的方法绘图。

      以下为示例代码:

<html>
<body>
<h2>画图入门</h2>
<canvas id="mc" width="300" height="180" style="border:1px solid black"></canvas>
<script>
var canvas=document.getElementById("mc");
var ctx=canvas.getContext("2d");
ctx.fillStyle="#f00";
ctx.fillRect(30,40,80,100);
</script>
</body>
</html>

运行效果如下:

 

HTML5的绘画支持(一)