·您当前的位置:主页 > 技术教程 > Html5技术 >

[html5]html5中Canvas标签用法使用实例

时间:2016-12-02 11:31酷播
这里过多的概念性解释我就不多写了的,大家完全可以百度、Google一下即可清楚更多。Canvas就是HTML5内新增的一个API标签。

 一、什么是Canvas标签?Canvas标签有什么用途?
这里过多的概念性解释我就不多写了的,大家完全可以百度、Google一下即可清楚更多。Canvas就是HTML5内新增的一个API标签。
<canvas> 标签定义图形,比如图表和其他图像。
<canvas> 标签只是图形容器,您必须使用脚本来绘制图形。

二、如何使用Canvas API来画一个正方形,并加上对角线?
1、首先在HTML内设置一个Canvas标签,并设置其Height和Width,以及Border属性,代码如下: 

  1. <!-- canvas target -->   
  2. <canvas id="diagonal" height="200px" width="200px" style="border:1px solid #000000;">               
  3. </canvas>   

2、结合JS在Canvas区域内画图

  1. function drawDiagonal() {   
  2.     //取得canvas的元素及其绘图上下文   
  3.     var canvasObj = document.getElementById("diagonal");   
  4.     var context = canvasObj.getContext("2d");   
  5.     //用绝对坐标来创建一条路径   
  6.     //画两条对角线   
  7.     context.beginPath();   
  8.     //将点移动至原点   
  9.     context.moveTo(0, 0);   
  10.     //划线至右下角   
  11.     context.lineTo(200, 200);   
  12.     //将这条线绘制到canvas上   
  13.     context.stroke();   
  14.    
  15.     //将点移动至右下角   
  16.     context.moveTo(0, 200);   
  17.     //划线至右上角   
  18.     context.lineTo(200, 0);   
  19.     //将这条线绘制到canvas上   
  20.     context.stroke();   
  21. }   
  22. //页面导入的时候执行画图程序   
  23. window.addEventListener("load", drawDiagonal, true);   

3、运行页面后效果图如下

来源:http://blog.csdn.net/china_skag/article/details/17068265

热门文章

请稍候...
  • 锁定云视频大聚惠
  • 相约直播超值狂欢
保利威视云直播
保利威视云视频
微信付费直播
酷播云免费在线视频整体解决方案
酷播v4.0网页播放器