标签：style blog http color io java ar strong 文件
Canvas元素是HTML5中新增的一个专门用来进行图形绘制的元素。和其名称Canvas一样，它就相当于一个画布，我们可以在其上描绘各种图形。
这里所说的绘制图型，不是指我们可以进行可视化的图形绘制，而是要利用javascript在其中进行进行操作。
这里做个简单的canvas实例：
1.在页面中添加canvas元素
首先在页面中添加canvas元素，需要给定其高度、宽度和唯一标识id<!doctype html>
<html lang="en"> <head> <meta charset="UTF-8">
<script type="text/javascript" src="canvas.js"></script>
</head> <body onload="draw(‘canvas‘)"> <h1>Canvas元素示例</h1> <canvas id="canvas" width="400" height="300"> </canvas> </body> </html>
2.绘制矩形
在cavas.js文件中做绘制矩形操作：
function draw(id){ // 1.获取canvas对象 var canvasDom = document.getElementById(id); if(canvasDom == null){ return false; } // 2.获取上下文 var context = canvas.getContext(‘2d‘); // 3.填充与绘制边框 context.fillRect(0, 0, 400, 300); // 4.设定绘图样式 context.fillStyle = ‘#EEF‘; // 填充颜色 // 5.制定线宽 context.lineWidth = 1; // 6.指定颜色值 context.strokeStyle = ‘blue‘; // 设定边框颜色 // 7.绘制矩形 context.fillRect(50, 50, 100, 100);// 填充矩形 context.strokeRect(50, 50, 100, 100); // 绘制矩形边框 }
最终效果
标签：style blog http color io java ar strong 文件
原文地址：http://www.cnblogs.com/goupb/p/3981567.html
