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

CANVAS中的lineWidth小计

时间:2017-04-25 21:09:32      阅读:149      评论:0      收藏:0      [点我收藏+]

标签:document   宽度   分布   bsp   color   com   height   绘图   context   

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小计

标签:document   宽度   分布   bsp   color   com   height   绘图   context   

原文地址:http://www.cnblogs.com/c4633/p/6764096.html

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