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

weixin_30558305

于 2016-05-24 11:48:00 发布

阅读量107

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/dannyxie/p/5522913.html

本文介绍如何使用HTML5的Canvas API来绘制一个特殊的三角形图案，并在图案旁添加文字说明。通过设置canvas元素的宽度和高度，利用JavaScript进行绘图操作，包括设置线条颜色、宽度及字体样式等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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