导航：首页 > 网络技术 >

HTML5 学习手笔一：canvas API 画对角线

发表于：2024-11-28 作者：热门IT资讯网编辑

编辑最后更新 2024年11月28日，自从停博一段时间后，一直在思考特别是今年开年，在想学习什么技术做为未来的技术储备。本来想加强下Android 底层方面的知识，但觉得工作上跟这块有所涉及再学习的话有点懒，由于Windows Phone

自从停博一段时间后，一直在思考特别是今年开年，在想学习什么技术做为未来的技术储备。本来想加强下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>

效果如下例子：

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