canvas意思是“画布”，是使用js动态生成的，基于“位图”，放大会失真，每次修改，都需要重新绘制。
SVG相当于“矢量图”，是使用XML静态描述的。
canvas坐标系
数学坐标系：y轴向上
W3C坐标系：y轴向下
绘制直线
- body中定义画布
canvas的宽度和高度要在HTML属性中定义，默认宽度为300px，高度为150px。 - script中先获取ID，
然后使用getContext("2d")获取canvas 2D上下文环境对象，
接下来定义直线的起始点moveTo()，终止点lineTo(),使用stroke()进行绘制，
如果要继续绘制就接着写lineTo()，默认起始点为上一段终止点。
HTML5 canvas暂时只提供2D绘图API，所以getContext("2d") 中2d改为3d也不能实现3d绘图，BUT！3D可用WebGL进行开发，HTML5中的黑科技。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
//封装
function $$(id){
return document.getElementById(id);
}
//提取
window.onload=function(){
var cnv=$$("canvas");
var cxt=cnv.getContext("2d");
//绘制直线
cxt.moveTo(50,100);
cxt.lineTo(150,50);
cxt.lineTo(150,100);
cxt.stroke();
}
</script>
</head>
<body>
<canvas id="canvas" width="250" height="150" style="border:1px dashed gray"></canvas>
</body>
</html>
ヾ(✿ﾟ▽ﾟ)ノ
网友评论