Canvas元素是HTML5中新增的一个专门用来进行图形绘制的元素。和其名称Canvas一样，它就相当于一个画布，我们可以在其上描绘各种图形。

这里所说的绘制图型，不是指我们可以进行可视化的图形绘制，而是要利用javascript在其中进行进行操作。

这里做个简单的canvas实例：

1.在页面中添加canvas元素

首先在页面中添加canvas元素，需要给定其高度、宽度和唯一标识id

Canvas元素示例

2.绘制矩形

在cavas.js文件中做绘制矩形操作：

function draw(id){ canvasDom = document.getElementById(id); if(canvasDom == null){ return false; } context = canvas.getContext('2d'); // 3.填充与绘制边框 context.fillRect(0, 0, 400, 300); // 4.设定绘图样式 context.fillStyle = '#EEF'; context.lineWidth = 1; // 6.指定颜色值 context.strokeStyle = 'blue'; context.fillRect(50, 50, 100, 100);// 填充矩形 context.strokeRect(50, 50, 100, 100); // 绘制矩形边框 }

最终效果

如果您想提高自己的技术水平，认识同行朋友、开拓技术视野，请加入QQ群：116537189

Powered by 脚本百事通 © 2014  粤ICP备13007878号-1  联系本站：155120699@qq.com