脚本宝典收集整理的这篇文章主要介绍了html5教程-HTML5 学习手笔一：canvas API 画对角线，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。
自从停博一段时间后，一直在思考特别是今年开年，在想学习什么技
术做为未来的技术储备。本来想加强下And
ROId 底层方面的知识，但
觉得工作上跟这块有所涉及再学习的话有点懒，由于Windows Phone 7 开发工作上没有涉及，目前也算是入门，未来短时间内不会考虑将其应用于工作选择，故不做考虑。现选择了两个
方向为：IOS和
HTML5，手上的毛主席相对比较紧还没有买MAC，所以优先选择了HT
ML5先涉猎一下，以后再考虑精通
或者再涉猎IOS，作为未来的技术储备。
关于HTML5的简介和推广者网上一大把资料这里就略过，直接进入主题。
在页面中加入HTML5->canvas
在HTML页面中插入canvas 元素非常直观。只要在HTML源码中插入canvas标签：
<canvas id="diagonal" style="border:1px solid;" width="200" height="200"></canvas> //带实心边框的canvas 元素
在canvas中绘制一条对角线
步骤分为：
- 首先获得页面元素中的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();
根据上面的步骤，编写的代码为：
<!DOCTY
PE html>
<html>
<canvas id="diagonal" style="border:1px solid;" width="200" height="200"></canvas>
<script>
function drawDiagonal()
{
var canvas=document.getElementById('diagonal_line');//获得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>
效果如下例子：
<ifr
ame frameborder="0" height="220" scrolling="no" src="http://files.cn
blogs
.COM/TerryB
LOG/line_canvas.htm" width="300"></iframe>
注意：beginPath、moveTo、lineTo都不会直接修改canvas的展示结果。canvas中很多用于
设置样式和
外观的函数也同样不会直接修改显示结果。只有当对路径应用绘制（storke）或填充（fill）方法时，结果才会显示出来。否则，只有在显示图像、显示广本或者绘制、填充和清除矩形框的时候，canvas才会马上更新。
使用变换方法在canvas 上绘制对角线
这个方法较之上面的方法多了三个步骤：
首先先保存当前绘图状态save
再用平衡方法绘制上下文，使用translate
最后再绘图完毕后使用re
Store 恢复原有的绘图状态。
至于为什么要使用save和restore方法，演示完DEMO会讲述。变化方法绘制对角线的代码如下：
<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);
</script>
演示的DEMO如下：
<iframe frameborder="0" height="220" scrolling="no" src="http://files.cnblogs.com/TerryBlog/translate_canvas.htm" width="300"></iframe>
使用canvas 的save 和restore注意
事项 分为两种情况：
如果你本身绘制的图可以一次性绘制完，那可以不使用save和restore
如果你绘制图绘制一次后，使用stroke或才fill 后，底下还需要再次做绘制的动作，那么使用save和restore 会更好，不会跟上次的画图冲突，得不到我们想要的效果。
几个简单的小例子，稍微了解了HTML5 的一些编写方式和它强悍的API，虽然目前还没有好用的IDE来编写HTML5应用或游戏，但随着HTML5一步步的来临，对它的未来应用非常有信心
作者 Terry_龙
自从停博一段时间后，一直在思考特别是今年开年，在想学习什么技术做为未来的技术储备。本来想加强下Android 底层方面的知识，但觉得工作上跟这块有所涉及再学习的话有点懒，由于Windows Phone 7 开发工作上没有涉及，目前也算是入门，未来短时间内不会考虑将其应用于工作选择，故不做考虑。现选择了两个方向为：IOS和HTML5，手上的毛主席相对比较紧还没有买MAC，所以优先选择了HTML5先涉猎一下，以后再考虑精通或者再涉猎IOS，作为未来的技术储备。
关于HTML5的简介和推广者网上一大把资料这里就略过，直接进入主题。
在页面中加入HTML5->canvas
在HTML页面中插入canvas 元素非常直观。只要在HTML源码中插入canvas标签：
<canvas id="diagonal" style="border:1px solid;" width="200" height="200"></canvas> //带实心边框的canvas 元素
在canvas中绘制一条对角线
步骤分为：
- 首先获得页面元素中的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();
根据上面的步骤，编写的代码为：
<!DOCTYPE html>
<html>
<canvas id="diagonal" style="border:1px solid;" width="200" height="200"></canvas>
<script>
function drawDiagonal()
{
var canvas=document.getElementById('diagonal_line');//获得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>
效果如下例子：
<iframe frameborder="0" height="220" scrolling="no" src="http://files.cnblogs.com/TerryBlog/line_canvas.htm" width="300"></iframe>
注意：beginPath、moveTo、lineTo都不会直接修改canvas的展示结果。canvas中很多用于设置样式和外观的函数也同样不会直接修改显示结果。只有当对路径应用绘制（storke）或填充（fill）方法时，结果才会显示出来。否则，只有在显示图像、显示广本或者绘制、填充和清除矩形框的时候，canvas才会马上更新。
使用变换方法在canvas 上绘制对角线
这个方法较之上面的方法多了三个步骤：
首先先保存当前绘图状态save
再用平衡方法绘制上下文，使用translate
最后再绘图完毕后使用restore 恢复原有的绘图状态。
至于为什么要使用save和restore方法，演示完DEMO会讲述。变化方法绘制对角线的代码如下：
<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);
</script>
演示的DEMO如下：
<iframe frameborder="0" height="220" scrolling="no" src="http://files.cnblogs.com/TerryBlog/translate_canvas.htm" width="300"></iframe>
使用canvas 的save 和restore注意事项
分为两种情况：
如果你本身绘制的图可以一次性绘制完，那可以不使用save和restore
如果你绘制图绘制一次后，使用stroke或才fill 后，底下还需要再次做绘制的动作，那么使用save和restore 会更好，不会跟上次的画图冲突，得不到我们想要的效果。
几个简单的小例子，稍微了解了HTML5 的一些编写方式和它强悍的API，虽然目前还没有好用的IDE来编写HTML5应用或游戏，但随着HTML5一步步的来临，对它的未来应用非常有信心
作者 Terry_龙
觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！
脚本宝典总结
以上是脚本宝典为你收集整理的html5教程-HTML5 学习手笔一：canvas API 画对角线全部内容，希望文章能够帮你解决html5教程-HTML5 学习手笔一：canvas API 画对角线所遇到的问题。
如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。