首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

html5-canvas篇

2013-03-21 
html5---canvas篇canvas的缺点:1是位图画布,不支持缩放;2,用canvas绘制出来的对象不属于页面DOM结构或者任

html5---canvas篇

canvas的缺点:1是位图画布,不支持缩放;2,用canvas绘制出来的对象不属于页面DOM结构或者任何命名空间

优势:1,不需要将所绘制的图像中的每个画元当做对象来存储,因此执行性能很好,2,在编程语言方面,canvas更简单

canvas默认是一宽300px高150px的矩形区域

步骤:首先获取上下文 ,接着在上下文中执行动作,最后将这些动作应用到上下文中。

canvas坐标,从左上角开始,x轴沿水平方向向右延伸,y轴沿垂直方向向下延伸,左上角的坐标(x,y)=(0,0)称为原点

替代内容:在不支持canvas的浏览器中应该使用替代内容来提醒用户最新的浏览器,以便可以享受html5带来的更佳的浏览效果,例如

<canvas>update your brower to enjoy canvas </canvas>

该替代文字“update your brower to enjoy canvas”在支持canvas标签的浏览器中是不会显示的,但是在不支持canvas的浏览器中会显示该文字

现在主流浏览器的最新版本除了ie以外已经都支持canvas标签了,不过ie也可以通过嵌入js标签来加载explorercanvas

<head><!--[if IE]><script src="excanvas.js"></script><![endif]--></head>

? 在IE中使用canvas

检测浏览器支持的情况

try{    document.createElement("canvas").getContext("2d");  }catch(e){    document.getElementById("support").innerHTML="update your brower to enjoy canvas";}

? canvas实例1

在html页面中插入canvas元素

<canvas id="example01" style="border:1px solid; width:200px; height:200px;"> </canvas>

?通过js获取canvas,并绘制一条对角线

<script>    function line()    {        var canvas=document.getElementById("example01");        var context=canvas.getContext('2d');        context.beginPath();        context.moveTo(70,140);        context.lineTo(140,70);        //将这条线绘制到canvas上        context.stroke();    }    line();</script>

?

?

?

?

?

?

?

?

svg的学习

热点排行