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

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

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

   关于HTML5的简介和推广者网上一大把资料这里就略过,直接进入主题。


在页面中加入HTML5->canvas

  在HTML页面中插入canvas 元素非常直观。只要在HTML源码中插入canvas标签:

 //带实心边框的canvas元素

请使用支持HTML5的浏览器浏览

 在canvas中绘制一条对角线

步骤分为:

  1. 首先获得页面元素中的canvas对象: var canvas=document.getElementById('diagonal');
  2. 得到canvas的上下文 :var context=canvas.getContext('2d');
  3. 通知canvas将要开始绘制一个新的图形:context.beginPath();
  4. 将当前的位置移动到新的目标坐标(x,y)。(不绘制):context.moveTo(0,0);
  5. 将当前位置移动到新的目标坐标(x,y),而且在两个坐标之间画一条直线:context.lineTo(140,70);
  6. 调用canvas根据上面的指示绘制图:context.stroke();

根据上面的步骤,编写的代码为:



        
        

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


当前文章:HTML5学习手笔一:canvasAPI画对角线-创新互联
文章源于:http://myzitong.com/article/dhhdhg.html