首页 > 代码库 > CANVAS中的lineWidth小计

CANVAS中的lineWidth小计

html代码

<canvas id="canvas" width="550" height="550">你的浏览器不支持canvas!</canvas>

1.js建立绘图环境:

var canvas=document.getElementById(canvas);  //获取canvas对象;
camvas.width=550;                  //设置canvas宽高;
canvas.height=550;
var context=canvas.getContext("2d");        //获取绘图环境;

 

2.设置canvas绘图线条宽度;

context.lineWidth=4;
context.moveTo(0,100);
comtext.lineTo(100,100);
context.stroke();

这里的context.lineWidth=4就是线条宽度为4px;而且线条宽度的中心就是y=100这条直线,线条宽度平均分布于两侧。

CANVAS中的lineWidth小计