HTML5初识Canvas
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Canvas示例</title> <!--[if lte IE 8]><script type="text/javascript" src="excanvas.js"></script><![endif]--> </head> <body> <p>Canvas的用途：</p> <p>动态生成和展示图形、图表、图像以及动画</p> <p>性能非常好：不需要将所绘制的图像中的每个图元当做对象存储。API相对简单</p> <p>canvas默认会创建一块矩形区域 默认尺寸 300 X 150(px)</p> <p>canvas的坐标默认是0,0 也叫原点</p> <p>canvas也可以通过css的方式增加边框、内边距、外边距等</p> <p>现在的大部分浏览器已经支持canvas<br />
老版本的IE不支持，可以使用一个js库来做兼容：explorercanvas.js <br>
js库地址：https://github.com/arv/ExplorerCanvas </p> <canvas id="test" style="border:1px solid;" width="200" height="200"> 当浏览器不支持canvas时会显示这段文字，这里还可以使用图片代替 </canvas> <script> function drawTest() { //获取canvas元素及绘图上下文对象 var canvas = document.getElementById('test'); var context = canvas.getContext('2d'); //用绝对坐标来创建一条路径 context.beginPath(); context.moveTo(70, 140); context.lineTo(140, 70); context.stroke(); } window.addEventListener("load", drawTest, true); </script> </body> </html>
内容来源于网络如有侵权请私信删除
- 还没有人评论，欢迎说说您的想法！
客服
