码迷,mamicode.com
首页 > 其他好文 > 详细

一段画对角线的canvas代码,之前没有写过canvas代码,现在记录下来

时间:2016-05-24 13:23:29      阅读:108      评论:0      收藏:0      [点我收藏+]

标签:

<canvas id="other"   style="width:320px;height:320px;"></canvas>

  

       var otherCanvas=document.getElementById(‘other‘);
            //获取真实width和height 设置到canvas的width和height
            var height=otherCanvas.offsetHeight,width=otherCanvas.offsetWidth;
            otherCanvas.width=width;
            otherCanvas.height =height;
            var context=otherCanvas.getContext("2d");
            context.lineWidth="1";//设置线的宽
            context.strokeStyle="#E8E8E8";//颜色
            context.beginPath();//开始划线
            context.moveTo(width,0);//设置起点(x,y)
            context.lineTo(width/2+16,height/2);//画线(x,y)
            context.lineTo(width,height);//画线(x,y)
            context.stroke();//生成线条
            context.font = ‘ 14px sans-serif‘;//字体
            context.fillText("*其他",16,(height/2)+8);//写入字符

最后生成如下效果技术分享

一段画对角线的canvas代码,之前没有写过canvas代码,现在记录下来

标签:

原文地址:http://www.cnblogs.com/dannyxie/p/5522913.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!