h5 Canvas线段的绘制
在Canvas中,线段也是路径中的一种,被称之为线性路径。在Canvas中绘制线性路径主要用到moveTo(x,y)、lineTo(x,y)和stroke()几个方法。
通常创建线条的方法是moveTo()和lineTo()方法,但是要使线性路径出现在canvas之中,我们必须使用上面提到的stroke()方法
创建线条
const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');function drawScreen() {context.strokeStyle = '#e6c7ff';context.lineWidth = 2; // 设置线段宽度context.beginPath(); // 开始点context.moveTo(30, 30);context.lineTo(230, 30);context.lineTo(230, 200);context.stroke(); // 进行绘制外边框context.beginPath();context.moveTo(300, 30);context.lineTo(500, 30);context.lineTo(500, 200);context.stroke(); // 进行绘制外边框
}
drawScreen();
使用strokeStyle属性设置线性路径的颜色,使用lineWidth设置线性路径的宽度为2像素,通过beginPath开始一条新路径,将新路径的起点移动到(30, 30)坐标处,将新路径的终点绘制到坐标点(230, 30)、(230, 200),最后在使用stroke()使得路径可见.
线段的颜色和宽度
通过上面的简单实例,我们能够知道线段样式的改变能够通过lineWidth、strokeStyle属性进行控制
宽度
const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');function drawScreen() {context.strokeStyle = '#e6c7ff';context.lineWidth = 6; // 设置线段宽度context.beginPath(); // 开始点context.moveTo(30, 30);context.lineTo(230, 30);context.lineTo(230, 200);context.stroke(); // 进行绘制外边框context.beginPath();context.lineWidth = 20; // 设置线段宽度context.moveTo(300, 30);context.lineTo(500, 30);context.lineTo(500, 200);context.stroke(); // 进行绘制外边框context.beginPath();context.lineWidth = 1; // 设置线段宽度context.moveTo(30, 230);context.lineTo(230, 230);context.lineTo(230, 530);context.stroke(); // 进行绘制外边框
}drawScreen();
我们分别通过context.lineWidth = 6、context.lineWidth = 20、context.lineWidth = 1设置了路径的宽度
颜色
对于颜色,我们也能够按照属性strokeStyle进行设置
const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');function drawScreen() {context.strokeStyle = '#e6c7ff';context.lineWidth = 6; // 设置线段宽度context.beginPath(); // 开始点context.moveTo(30, 30);context.lineTo(230, 30);context.lineTo(230, 200);context.stroke(); // 进行绘制外边框context.beginPath();context.strokeStyle = '#e6c';context.lineWidth = 20; // 设置线段宽度context.moveTo(300, 30);context.lineTo(500, 30);context.lineTo(500, 200);context.stroke(); // 进行绘制外边框context.beginPath();context.strokeStyle = '#0ff';context.lineWidth = 1; // 设置线段宽度context.moveTo(30, 230);context.lineTo(230, 230);context.lineTo(230, 530);context.stroke(); // 进行绘制外边框
}drawScreen();
strokeStyle主要用于设置画笔绘制路径的颜色、渐变和模式。该属性的值可以是一个表示CSS颜色值的字符串。如果你的绘制需求比较复杂,该属性的值还可以是一个CanvasGradient对象或者CanvasPattern对象。
也就是说,我们也可以绘制渐变色的线段:
const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');function drawScreen() {// 创建一个表示线性颜色渐变的CanvasGradient对象,// 并设置该对象的作用区域就是线段所在的区域context.beginPath();var canvasGradient = context.createLinearGradient(50, 50, 250, 50);// 在offset为0的位置(即起点位置)添加一个蓝色的渐变canvasGradient.addColorStop(0, "blue");// 在offset为0.2的位置(线段左起20%的位置)添加一个绿色的渐变canvasGradient.addColorStop(0.2, "green");// 在offset为0.8的位置(即终点位置)添加一个红色的渐变canvasGradient.addColorStop(0.8, "yellow");// 在offset为1的位置(即终点位置)添加一个红色的渐变canvasGradient.addColorStop(1, "red");// 将strokeStyle的属性值设为该CanvasGradient对象context.strokeStyle = canvasGradient;context.lineWidth = 100;context.moveTo(50, 20);context.lineTo(350, 100);context.stroke();context.beginPath();canvasGradient = context.createLinearGradient(50, 50, 250, 50);// 在offset为0的位置(即起点位置)添加一个蓝色的渐变canvasGradient.addColorStop(0, "blue");// 在offset为0.6的位置(线段左起20%的位置)添加一个绿色的渐变canvasGradient.addColorStop(0.6, "green");// 在offset为0.8的位置(即终点位置)添加一个红色的渐变canvasGradient.addColorStop(0.8, "yellow");// 在offset为1的位置(即终点位置)添加一个红色的渐变canvasGradient.addColorStop(1, "red");// 将strokeStyle的属性值设为该CanvasGradient对象context.strokeStyle = canvasGradient;context.lineWidth = 5;context.moveTo(50, 220);context.lineTo(350, 320);context.stroke();
}
drawScreen();
第一张我们是按照宽度为100像素的效果,后面一张是按照像素为5的效果,我们createLinearGradient进行了颜色渐变处理.同样我们也能够使用放射性渐变效果createRadialGradient产生strokeStyle.
线段与像素边界
这是绘制线段的一个小细节。在说这个细节之前,咱们先来看一个小示例,就是绘制两条简单的直线。
const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');function drawScreen() {context.strokeStyle = 'red';context.lineWidth = 1;context.beginPath();context.moveTo(50, 50);context.lineTo(350, 50);context.stroke();context.beginPath();context.moveTo(50.5, 100.5);context.lineTo(350.5, 100.5);context.closePath();context.stroke();
}
drawScreen();
虽然我们在代码中设置了lineWidth的值为1,同样的值,但绘制出来的结果却不一样,第一条的宽度变成了2,而第二条的宽度是1。
这就是我们接下来要说的线段与像素边界。如果你在某2个像素的边界处绘制一条1像素宽的线段,那么该线段实际上会占据2个像素的宽度,如果在像素边界处绘制一条1像素宽的垂直线段,那么Canvas的绘图环境对象会试着将半个像素画在边界中线的右边,将另外半个像素画在边界中线的左边。
然而,在一个整像素的范围内绘制半个像素宽的线段是不可能的,所以左右两个方向上的半像素都被扩展为1个像素。正如上图中左图,本来我们想要将线段绘制在深灰色的区域内,但实际上浏览器却将其延伸绘制到整个灰色的范围内。
另一方面,我们来看看如果将线段绘制在某2个像素点之间的那个像素中,效果就如上图中右图。这条垂直线段绘制在两个像素之间,这样的话,中线左右两端的那半个像素就不会再延伸了,它们合半起来恰好占据1像素的宽度。所以说,如果绘制一条真正1像素宽的线段,你必须将该线段绘制在某两个像素之间的那个像素中,而不能将它绘制在两个像素的交界处。
绘制网格
由上面知识,我们去实现一个网格的制作.
height="500" width="100%" scrolling="no" title="h5CanvasGrid" src="//codepen.io/suwu150/embed/PLqoXG/?height=265&theme-id=0&default-tab=js,result" allowfullscreen="true"> See the Pen h5CanvasGrid by suwu150 ( @suwu150) on CodePen.
这个网格中线段就是绘制在两个像素之间的像素上面,而且绘制出来的像素仅有0.5像素宽.
总结
1.moveTo(x,y)、lineTo(x,y)和stroke()方法的使用,通过moveTo、lineTo确定线段,通过stroke使可见
2.线段宽度与颜色的设置,strokeStyle、lineWidth的使用,能够进行创建颜色渐变线条和放射渐变线条
3.线段与像素边界
h5 Canvas线段的绘制相关推荐
- h5 Canvas矩形的绘制
h5 Canvas矩形的绘制 1.绘制矩形api 在Canvas中提供了绘制矩形的API: fillRect(x, y, width, height):绘制一个填充的矩形 strokeRect(x, ...
- h5 canvas仿 Photoshop 绘制调色板
本文采取的是最原始方式进行绘制,实现类似渐变的效果等都是最原始的.我进行了大量的循环绘制,而 js 的效率本来就不高.建议采用系统的渐变 api 进行绘制,靠底层的能力,效率应该会高出不少.但渐变的绘 ...
- H5 Canvas 垂直箭头绘制
效果 ⚠ 因为使用的是斜率来处理的垂直逻辑 tan,当为被除数为0时做了特殊处理,两点自由变换时到达零界点会有卡顿. 推导 开始复习初中二年级数学知识 斜率k的公式: k = ( y 1 − y 2 ...
- H5 Canvas绘制三角函数图像
三角函数sin.cos.tan.sinh.cosh.tanh js 的Math库,自带了许多常见函数方法,其中关于 三角函数的求解还是很齐全的,于是想到,利用canvas 绘制一个比较准确的 sin. ...
- 用H5 canvas实现唯美渐变色块的绘制
随着Web前端的不断发展,我们已经可以使用H5+js+css做出很多复杂而优美的视觉效果.一幕幕的视觉盛宴背后是网页设计人员精巧的构思和前端开发人员的精湛技能.今天我们来讲述一下简单H5 canvas ...
- 绘制六芒星战斗力属性图 —— h5 canvas 初体验
在黄金的沙滩上 安息着远古的悲剧 在深绿的波涌中 停着灵魂的船 --<眼睛>,顾城 最近用MUI做Web app时想实现一个六芒星战斗力图的(类似LPL赛前战队实力分析图)效果,由于正多边 ...
- H5画布 canvas(一)canvas简介、绘制圆形矩形、案例饼状图绘制
目录 1. canvas 简介 2. canvas 标签介绍 3. canvas 上下文 Context 4. 案例:在 canvas 画布中绘制表格 5. canvas 的 beginPath 状态 ...
- H5画布 canvas(一)canvas简介、绘制圆形/矩形、案例饼状图绘制
目录 1. canvas 简介 2. canvas 标签介绍 3. canvas 上下文 Context 4. 案例:在 canvas 画布中绘制表格 5. canvas 的 beginPath 状态 ...
- php绘制频谱图,H5的Canvas如何实现绘制音乐环形频谱图
这次给大家带来H5的Canvas如何实现绘制音乐环形频谱图,H5Canvas实现绘制音乐环形频谱图的注意事项有哪些,下面就是实战案例,一起来看一下. 在B站我们有很多的小伙伴们应该都看到过用AE做的可 ...
最新文章
- 中南大学计算机辅助工艺设计,中南大学计算机辅助制造大作业.doc
- (转)个例子让你了解Java反射机制
- [二叉树]序列化二叉树 (剑指offer61)
- 0-2岁的app开发人员必读,Android开发APP前的准备事项
- php ord函数 中文,php ord 函数与中文乱码解决方法_PHP教程
- 作者:周晓津(1971-),男,博士,广州市社会科学院研究员。
- sql无法写入mysql_windows7 sqlserver2012 无法写入受保护的内存 解决办法
- h5离线缓存+sessionstroage做 离线网页
- VMware vSphere 6.7 U3b 下载
- 2022年全球程序员薪资排行出炉:中国倒数第九,GO最赚钱
- 介绍一个牛人的机器学习PPT
- VB中九九乘法表的实现
- 从程序员角度看“上帝“玩游戏
- C++后端开发学习路线及推荐学习时间
- 今天很悲剧,心情很郁闷
- 卷积神经网络之前向传播算法
- goland debug Got a connection, launched process /private/var/folders/l9/
- 科幻大作明日边缘首曝预告
- 苹果手机左上角的数字怎么弄_出了新朋友,莫忘老朋友,苹果Macbook这款小键盘能让你键步如飞...
- python考试等级划分_考试等级分类