html中右边线条怎么写,html5 三角形的线条怎么写

满意答案

tstuem

2017.03.14

采纳率：54%    等级：8

已帮助：612人

使用 标签

但是只是图形容器，您必须使用脚本来绘制图形

使用绘制矩形

var canvas=document.getElementById('myCanvas');

var ctx=canvas.getContext('2d');

ctx.fillStyle='#00ff00';

ctx.fillRect(0,0,90,100);

下面教大家画条直线，代码注释很详细不再多说。

var canvas=document.getElementById("canvas");

//设置绘图环境

var cxt=canvas.getContext('2d');

//开启新路近

cxt.beginPath();

// 设置笔触的宽度

cxt.lineWidth=2;

//设置笔触的颜色

cxt.strokeStyle="#ff0000";

//设定笔触的位置

cxt.moveTo(20,20);

//设置移动的位置

cxt.lineTo(200,20);

//画线

cxt.stroke();//这个时候的线已经出来了

//关闭路径

cxt.closePath();

//凡事路径图形必须先开始路径,画完之后必须结束路径

下边代码是画三角形，分空心和实心两种实现。

var canvas=document.getElementById("canvas1");

var cxt=canvas.getContext("2d");

cxt.beginPath();

cxt.moveTo(100,50);

cxt.lineTo(50,200);

cxt.lineTo(150,200);

cxt.closePath();//填充或闭合 需要先闭合路径才能画

//空心三角形

cxt.strokeStyle="red";

cxt.stroke();

//实心三角形

cxt.beginPath();

cxt.moveTo(250,50);

cxt.lineTo(200,200);

cxt.lineTo(300,200);

cxt.closePath();

cxt.fill();

00分享举报