标签介绍

canvas: 画布标签.它没有自己的行为，但是定义了一个 API 支持脚本化客户端绘图操作

绘图 API 都没有定义在 <canvas> 元素本身上，而是定义在通过画布的 getContext() 方法获得的一个“绘图环境”对象上。Canvas API 也使用了路径的表示法。但是，路径由一系列的方法调用来定义，而不是描述为字母和数字的字符串，比如调用 beginPath() 和 arc() 方法。一旦定义了路径，其他的方法，如 fill()，都是对此路径操作。

moveTo() 把路径移动到画布中的指定点，不创建线条

lineTo() 添加一个新点，然后在画布中创建从该点到最后指定点的线条

stroke() 绘制已定义的路径

translate() 重新映射画布上的 (0,0) 位置

....

<canvas>当前浏览器不支持HTML5</canvas>

<script type="text/javascript">

function stroke(){

//获取画布

var canvas = document.getElementById('con');

//获取绘图环境

var context = canvas.getContext('2d');

//创建图形路径

context.beginPath();

//开始坐标

context.moveTo('300','0');

//结束坐标

context.lineTo('0','150');

//绘制直线

context.strokeStyle = '#39C';

context.stroke();

}

</script>

<canvas onclick=translate()>当前浏览器不支持HTML5</canvas>

<script type="text/javascript">

function translate(){

//获取画布

var canvas = document.getElementById('con1');

//获取绘图环境

var context = canvas.getContext('2d');

//保存当前环境

context.save();

//平移10个像素

context.translate('0','10')

//创建图形路径

context.beginPath();

//开始坐标

context.moveTo('300','0');

//结束坐标

context.lineTo('0','70');

//绘制直线

context.strokeStyle = '#39C';

context.stroke();

//返回之前保存过的路径状态和属性

context.restore();

//绘制新图

//开始坐标

context.moveTo('300','0');

//结束坐标

context.lineTo('0','70');

context.strokeStyle="#ccc";

context.stroke();}

</script>

标签路径