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

[html5]用canvas标签来定义图形(图表和其他图像)

时间:2017-11-07 11:02酷播
[html5]用canvas标签来定义图形(图表和其他图像)

什么是 Canvas?

HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成.

<canvas> 标签只是图形容器,您必须使用脚本来绘制图形。

你可以通过多种方法使用Canva绘制路径,盒、圆、字符以及添加图像。


浏览器支持

表格中的数字表示支持 <canvas> 元素的第一个浏览器版本号。

元素          
<canvas> 4.0 9.0 2.0 3.1 9.0

创建一个画布(Canvas)

一个画布在网页中是一个矩形框,通过 <canvas> 元素来绘制.

注意: 默认情况下 <canvas> 元素没有边框和内容。

<canvas>简单实例如下:
<canvas id="myCanvas" width="200" height="100"></canvas>

注意: 标签通常需要指定一个id属性 (脚本中经常引用), width 和 height 属性定义的画布的大小.

提示:你可以在HTML页面中使用多个 <canvas> 元素.

使用 style 属性来添加边框:

  1. <canvas id="myCanvas" width="500" height="500" style="border:1px solid #d3d3d3;"> 
  2. 您的浏览器不支持 HTML5 canvas 标签。</canvas> 
  3. <script> 
  4. var c=document.getElementById("myCanvas"); 
  5. var cctx=c.getContext("2d"); 
  6. ctx.beginPath(); 
  7. ctx.arc(250,250,250,0,Math.PI); 
  8. ctx.stroke(); 
  9. <p></script> 

 

热门文章

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