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的学习
相关推荐
大地飞鸿 2020-11-12
星星有所不知 2020-10-12
jinxiutong 2020-07-26
MIKUScallion 2020-07-05
songfens 2020-07-05
songfens 2020-06-11
songfens 2020-06-08
northwindx 2020-05-31
northwindx 2020-05-31
northwindx 2020-05-27
northwindx 2020-05-25
MIKUScallion 2020-05-25
jinxiutong 2020-05-10
xdyangxiaoromg 2020-05-10
大地飞鸿 2020-05-06
northwindx 2020-04-25