您的位置：首页 > Web前端 > HTML5

html5 学习笔记 API canvas1 绘制对角线

2013-09-30 20:16 756 查看

1 canvas （graphics）绘制二维矢量图的画布

2 检测浏览器是否支持 canvas

[html] view
plaincopy

try{

document.createElement("canvas").getContext("2d");

alert("ok");

//document.getElementById("support").innerHTML = "Html5 canvas is support in your browser";

}catch(e){

document.getElementById("support").innerHTML = "Html5 canvas is not support in your browser";

alert("No");

}

3 在页面中插入canvas 元素

[html] view
plaincopy

<canvas id="diagonal" style="border:1px solid;" width="200" height="200"></canvas> //带实心边框的canvas元素

4 绘制简对角线

首先获得页面元素中的canvas对象： var canvas=document.getElementById('diagonal');

得到canvas的上下文：var context=canvas.getContext('2d');

通知canvas将要开始绘制一个新的图形：context.beginPath();

将当前的位置移动到新的目标坐标(x,y)。(不绘制):context.moveTo(0,0);

将当前位置移动到新的目标坐标(x,y)，而且在两个坐标之间画一条直线:context.lineTo(140,70);

调用canvas根据上面的指示绘制图：context.stroke();

[html] view
plaincopy

<html>

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

<script>

function drawDiagonal()

{

var canvas=document.getElementById('diagonal');//获得canvas对象

var context=canvas.getContext('2d'); //获取canvas的上下文

//用绝对坐标来创建一条路径

context.beginPath();

context.moveTo(0,0);//将光标移动到x为0，y为0的地方开始准备从这里开始绘制

context.lineTo(140,70);//绘制到x 坐标为140，y坐标为70的地方

//将这条线绘制到canvas上

context.stroke(); //只有调用stroke canvas 才会绘制图像显示结果

}

window.addEventListener("load",drawDiagonal,true);

</script>

</html>

注意： beginPath、moveTo、lineTo都不会直接修改canvas的展示结果。canvas中很多用于设置样式和外观的函数也同样不会直接修改显示结果。只有当对路径应用绘制（storke）或填充（fill）方法时，结果才会显示出来。否则，只有在显示图像、显示广本或者绘制、填充和清除矩形框的时候，canvas才会马上更新。

5 使用变换方法在canvas上绘制对角线

这个方法较之上面的方法多了三个步骤：

首先先保存当前绘图状态save

再用平衡方法绘制上下文，使用translate

最后再绘图完毕后使用restore 恢复原有的绘图状态。

[html] view
plaincopy

<script>

function drawDiagonal()

{

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

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

//保存当前绘图的状态

context.save();

//向右下方移动绘图上下文

context.translate(70,140);//平移-> x表示将坐标原点向左右移动多少个单位 y表示将坐标原点向上下移动多少个单位

//画图

context.beginPath();

context.moveTo(0,0);

context.lineTo(70,-70);

context.stroke();

//恢复原有的绘图状态

context.restore();

//之所以要使用save 和 restore 是因为在操作canvas 时先把状态保存，然后如果下面还需要操作canvas时将状态恢复过来不会，这样不会影响到上面我们画完的结果。

}

window.addEventListener("load",drawDiagonal,true);

使用canvas 的save和restore需要注意事项

如果你本身绘制的图可以一次性绘制完，那可以不使用save和restore

如果你绘制图绘制一次后，使用stroke或才fill 后，底下还需要再次做绘制的动作，那么使用save和restore 会更好，不会跟上次的画图冲突，得不到我们想要的效果。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航