700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > html5 直线的两头弯曲 html5教程 (二)(canvas绘制简单的直线)

html5 直线的两头弯曲 html5教程 (二)(canvas绘制简单的直线)

时间:2019-02-18 06:16:45

相关推荐

html5 直线的两头弯曲 html5教程 (二)(canvas绘制简单的直线)

Html5_convas

var elem = document.getElementById("myConvas");

if (elem && elem.getContext) {

var myContext = elem.getContext("2d");

/*

通过 fillStyle和 strokeStyle 属性可以轻松的设置矩形的填充和线条。

颜色值使用方法和 CSS 一样:十六进制数、rgb()、rgba() 和 hsla。

通过 fillRect可以绘制带填充的矩形。使用 strokeRect 可以绘制只有边框没有填充的矩形。

如果想清除部分 canvas 可以使用 clearRect。上述三个方法的参数相同:x, y, width, height。

前两个参数设定 (x,y) 坐标,后两个参数设置矩形的高度和宽度。可以使用 lineWidth属性改变线条粗细

*/

myContext.fillStyle = "#000FFF";

myContext.strokeStyle = "#FF00F0";

/*

通过 canvas 路径(path)可以绘制任意形状。可以先绘制轮廓,然后绘制边框和填充。

创建自定义形状很简单,使用 beginPath()开始绘制,然后使用直线、曲线和其他图形绘制你的图形。

绘制完毕后调用 fill 和 stroke 即可添加填充或者设置边框。调用 closePath() 结束自定义图形绘制

*/

myContext.beginPath();

myContext.moveTo(10,10);

//定义第一条直线的终点坐标,也即为第二条直线的起点坐标

myContext.lineTo(60,90);

myContext.lineTo(10,150);

myContext.lineTo(10,10);

//画圆

//myContext.arc(90,89,45,50,Math.PI*2,true);

//用fillStyle定义的颜色填充

myContext.fill();

myContext.stroke();

myContext.closePath();

}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。