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

<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);//写入字符

最后生成如下效果

posted @ 2016-05-24 11:48  daniel.xie  阅读(448)  评论(0编辑  收藏  举报