HTML5学习手笔一：canvasAPI画对角线-创新互联

自从停博一段时间后，一直在思考特别是今年开年，在想学习什么技术做为未来的技术储备。本来想加强下Android 底层方面的知识，但觉得工作上跟这块有所涉及再学习的话有点懒，由于Windows Phone 7 开发工作上没有涉及，目前也算是入门，未来短时间内不会考虑将其应用于工作选择，故不做考虑。现选择了两个方向为：IOS和HTML5，手上的毛主席相对比较紧还没有买MAC，所以优先选择了HTML5先涉猎一下，以后再考虑精通或者再涉猎IOS，作为未来的技术储备。

创新互联建站主要从事成都网站建设、网站建设、网页设计、企业做网站、公司建网站等业务。立足成都服务贡觉,10多年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:18982081108

关于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>

另外有需要云服务器可以了解下创新互联cdcxhl.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

新闻名称：HTML5学习手笔一：canvasAPI画对角线-创新互联
文章路径：https://www.cdcxhl.com/article46/dhhdhg.html

成都网站建设公司_创新互联，为您提供标签优化、虚拟主机、服务器托管、营销型网站建设、自适应网站、动态网站

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容