canvas简单线条的绘制

下面先来看一下线条的绘制代码,烧我在详细说明

    线条绘制代码:

<canvas width="800" height="500" id="canvas">
			<script type="text/javascript">
				//获得画板
				var c=document.getElementById('canvas');
				//获得绘画环境
				var cv=c.getContext('2d');
				//定义线条宽度
				cv.lineWidth=10;
				//电源线条颜色
				cv.strokeStyle='green';
				//边角类型lineJoin='边叫类型'  边角类型:bevel:斜角,round:圆角,miter:尖角
				cv.lineJoin='round';
				//开启绘画路径(声明开始划线)
				cv.beginPath();
				//绘画开始位置move(X,Y)
				cv.moveTo(10,30);
				//绘画目标位置lineTo(x,y)
				cv.lineTo(400,12);
				//stroke()填充路径就是连接开始和结束点
				cv.stroke();

				cv.lineTo(90,188);
				cv.stroke();
				cv.lineTo(0,0);
				cv.stroke();

			</script>
		</canvas>

1.绘制线条之前首先进行声明线条开始绘制代码context.beginPath;说明:context是画板中获得的绘画环境上述的是cv

2.然后开始定义起始点位置(线条初始点)context.moveTo(left,top)线条的起始点在画板中的位置

3.开始定义线条末端的位置context.lineTo(left,top),线条终点的位置

4.在此开始定义线条的颜色,线条的粗细context.strokeStyle和context.lineWidth等属性,看到这你可能要说了,上面的代码定义的线条颜色,宽度在绘画线条的前面即beginPath()之前,这里说明一下这种属性只有在线条路径闭合之前都是生效的.

5.开始连接两点,闭合路径context.stroke()一个完整的线条绘制完毕!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏韦弦的偶尔分享

微信小程序仿APP section header 悬停效果

在onReady方法中,查询section-header节点并拿到该节点此时距离当前顶部的距离

3961
来自专栏十月梦想

canvas文本操作

contetx.fillText('需要写入画板的文字',left,top,maxwidth);指定了写入画板的文字,文字所处画板的位置left,top,最后一...

802
来自专栏西城知道

Photoshop快捷键大全 【转需】

PS是当今流行的图片处理工具..功能非常强大..也正是因为功能如此强大..所以有的时候会找不到一些功能在哪..浪费太多时间…

1091
来自专栏编程直播室

Canvas2D画线和面1.Html中的画布2.渲染上下文3.画一个方块4.画一条线

1682
来自专栏编程微刊

echarts仪表盘更换样式全圆形换成半圆

问题:想把图一的仪表盘默认样式换乘图二半圆的这个样式。官网中通过更换主题按钮切换的仪表盘样式,但是没有实际的demo~具体是怎么实现更换样式的?

6971
来自专栏全沾开发(huā)

background-clip的正确使用姿势

background-clip可以用来控制背景图片/颜色的填充范围。 我们知道,默认的background会填充盒模型的content+padding+bord...

3509
来自专栏每日一篇技术文章

weex-19-refresh组件

1281
来自专栏达摩兵的技术空间

与我一起学css3:background-size,-clip

大家好,今天与大家一起学习分享css3中的background-size,background-clip使用与实践。

1202
来自专栏前端说吧

CSS- ie6,ie7,ie8 兼容性写法,CSS hack写法

3234
来自专栏web前端-

Swiper实现全屏视觉差轮播

Swiper作为当代流行的js框架,非常受到青睐,这里演示swiper在pc端全屏视觉轮播的效果,这也是pc端常用的一种特性

6513

扫码关注云+社区

领取腾讯云代金券