html5 学习笔记 API canvas1 绘制对角线
2013-09-28 16:12
309 查看
1 canvas (graphics) 绘制二维矢量图的画布
2 检测浏览器是否支持 canvas
3 在页面中插入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();
注意: beginPath、moveTo、lineTo都不会直接修改canvas的展示结果。canvas中很多用于设置样式和外观的函数也同样不会直接修改显示结果。只有当对路径应用绘制(storke)或填充(fill)方法时,结果才会显示出来。否则,只有在显示图像、显示广本或者绘制、填充和清除矩形框的时候,canvas才会马上更新。
5 使用变换方法在canvas上绘制对角线
这个方法较之上面的方法多了三个步骤:
首先先保存当前绘图状态save
再用平衡方法绘制上下文,使用translate
最后再绘图完毕后使用restore 恢复原有的绘图状态。
使用canvas 的save和restore需要注意事项
如果你本身绘制的图可以一次性绘制完,那可以不使用save和restore
如果你绘制图绘制一次后,使用stroke或才fill 后,底下还需要再次做绘制的动作,那么使用save和restore 会更好,不会跟上次的画图冲突,得不到我们想要的效果。
2 检测浏览器是否支持 canvas
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 元素
<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> <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 恢复原有的绘图状态。
<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 会更好,不会跟上次的画图冲突,得不到我们想要的效果。
相关文章推荐
- html5 学习笔记 API canvas1 绘制对角线
- HTML5 之Canvas标签学习笔记之二:绘制矩形
- html5学习笔记二:利用canvas绘制简单图形
- HTML5 Canvas学习笔记之详解弧线的绘制
- 学习笔记:HTML5 Canvas绘制简单图形
- HTML5学习笔记之使用canvas绘制矩形
- HTML5制作坦克大战游戏+Canvas绘制基础图形——学习笔记一
- HTML5学习笔记14-Canvas绘制渐变图形与绘制变形图形
- HTML5 学习笔记15-Canvas图形绘制处理
- AUTOCAD学习笔记7:单相桥式整流滤波电路的绘制
- DayDayUP之HTML5学习笔记 三 article、hgroup、figure、figcaption、dialog标签简单应用
- HTML5学习笔记1
- 孙鑫VC++视频学习笔记之10: 图形绘制与通用对话框
- html5 canvas学习--绘制文字
- Cocos2d-x学习笔记(十五)之 绘制图形
- opencv学习笔记 在输入图像上寻找并绘制轮廓
- Direct-X学习笔记--图元绘制
- 【学习笔记】cocos2d 如何绘制一个字符串
- HTML5学习笔记——1
- html5学习笔记