canvas教程

html5编程教程-Canvas画布详细讲解

字号+ 作者:H5之家 来源:H5之家 2015-09-30 09:23 我要评论( )

一、简介 1、历史 Web之前有三种绘图的方式,Adobe Flash,SVG和VML。此次HTML5元素新添加的Canvas实际上是一个像素画布(bitmap canvas),和SVG不同,画在Canv

一、简介
 
1、历史
 
Web之前有三种绘图的方式,Adobe Flash,SVG和VML。此次HTML5元素新添加的Canvas实际上是一个像素画布(bitmap canvas),和SVG不同,画在Canvas上的元素无法进行缩放,同时也不是

DOM的一部分。 WHATWG的HTML5选择Canvas作为标准原因有二:1、由于不用存储画出的每一个元素,所以性能更好。2、和其他语言的二维绘图API类似,更容易实现。
 
2、结构
 Canvas在HTML页面中是一个“<canvas></canvas>”标签,显示为一个矩形区域。矩形区域的左上角为坐标原点(0,0),向右为X轴,向下为Y轴。
 
3、检测浏览器支持
 

JavaScript Code复制内容到剪贴板
 
try { 
document.createElement(“canvas”).getContext(“2d”); 
document.getElementById(“support”).innerHTML = 
“HTML5 Canvas is supported in your browser.”; 
} catch (e) { 
document.getElementById(“support”).innerHTML = “HTML5 Canvas is not supported É 
in your browser.”; 

 
4、失败回退
 对于不支持canvas的浏览器,会显示canvas标签中间的备选文字。注意:还有两点不足的地方,在canvas中绘制的图片不能设置备选文字(text alternatives)。
 
5、浏览器支持
 除了IE其他浏览器都支持,微软承诺在IE9中会支持Canvas
 
二、使用方法
 Canvas可以画直线,弧线,支持各种线条样式和使用纯色或图片填充,可以绘制文字和阴影等,API和一般语言的2D绘图API类似,就不在重复摘抄了,可以参看Mozilla Developer Center上

的的官方教程或者Opera的教程。
 
Canvas有两点需要注意:
 1、可以以像素的方式读写Canvas对象;
 2、可以跨站在canvas中载入图片,但是跨站载入的图片不可以以像素的方式编辑。也就是说跨站载入的图片可以显示,但是不能读取和复制。

(责任编辑:xywy)

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • fd详细教程|Excel_VBA_详细教程

    fd详细教程|Excel_VBA_详细教程

    2017-05-02 18:01

  • html5canvas核心技术图形、动画与游戏开发源码

    html5canvas核心技术图形、动画与游戏开发源码

    2017-05-02 17:42

  • 打印html5中Canvas的方法

    打印html5中Canvas的方法

    2017-05-01 15:03

  • SketchBook 2014 基础入门视频教程

    SketchBook 2014 基础入门视频教程

    2017-05-01 11:00

网友点评