Canvas画各种线
Canvas画各种线
在Canvas中绘制路径,最好加上beginPath()和closePath()。 结合lineTo()绘制不同的路径
closePath()方法创建从当前点到开始点的路径。 提示:请使用 stroke() 方法在画布上绘制确切的路径。 提示:请使用 fill() 方法来填充图像(默认是黑色)。请使用 fillStyle 属性来填充另一个颜色/渐变。 注意:Internet Explorer 8 及之前的版本不支持 <canvas> 元素。 beginPath() 方法开始一条路径,或重置当前的路径。 提示:请使用这些方法来创建路径 moveTo()、lineTo()、quadricCurveTo()、bezierCurveTo()、arcTo() 和 arc()。 提示:请使用 stroke() 方法在画布上绘制确切的路径。
画渐变直线
- var canvasGradient = ctx.createLinearGradient( 20, 20, 200, 20);
- //在offset为0的位置(即起点位置)添加一个蓝色的渐变
- canvasGradient.addColorStop( 0, "yellow");
- //在offset为0.2的位置(线段左起50%的位置)添加一个绿色的渐变
- canvasGradient.addColorStop( 0.5, "blue");
- //在offset为0的位置(即终点位置)添加一个红色的渐变
- canvasGradient.addColorStop( 1, "red");
- //将strokeStyle的属性值设为该CanvasGradient对象
- ctx.strokeStyle = canvasGradient;
- ctx.lineWidth = 10;
- ctx.moveTo( 20, 20);
- ctx.lineTo( 200, 20);
- ctx.stroke();
- ctx.beginPath();
- var canvasGradient01 = ctx.createLinearGradient( 20, 50, 200, 20);
- canvasGradient01.addColorStop( 0, "red");
- canvasGradient01.addColorStop( 1, "yellow");
- ctx.strokeStyle = canvasGradient01;
- ctx.lineWidth = 10;
- ctx.moveTo( 20, 50);
- ctx.lineTo( 200, 50);
- ctx.stroke();
画折线
在绘制图形路径时,一定要先调用beginPath()方法。beginPath()方法将会清空内存中之前的绘制路径信息。
如果,先调用storke()方法,再调用closePath方法时。在调用storke方法时,折线一画好,紧接着调用closePath方法,关闭当前路径;
如果,先调用closePath()方法,再调用storke方法时。在调用closePath方法时,当前路径没有关闭,该方法将会用直线连接当前点和起始点;
- ctx.beginPath();
- ctx.moveTo( 20, 20);
- ctx.lineTo( 50, 20);
- ctx.lineTo( 50, 100);
- ctx.lineTo( 100, 100);
- ctx.stroke();
- ctx.closePath();
- ctx.beginPath();
- ctx.moveTo( 120, 20);
- ctx.lineTo( 150, 20);
- ctx.lineTo( 150, 100);
- ctx.lineTo( 200, 100);
- ctx.closePath();
- ctx.stroke();
- ctx.closePath();
- ctx.beginPath();
- ctx.moveTo( 220, 20);
- ctx.lineTo( 250, 20);
- ctx.stroke();
- ctx.closePath();
- ctx.beginPath();
- ctx.lineTo( 250, 100);
- ctx.lineTo( 300, 100);
- ctx.stroke();
- ctx.closePath();
画实心线
fill方法,会把路径填充成一个图形。
画网格
Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 支持 lineJoin 属性。
注意:Internet Explorer 8 及之前的版本不支持 <canvas> 元素。
Canvas画各种线相关推荐
- 使用canvas画迁徙线并加上动态效果与小飞机图标
首先在页面中放上地图图片,并建立三个canvas标签,分别用于点.迁徙线.动态效果 <div class="mapBox"><div class="ma ...
- html5垂直线怎么画,HTML5 Canvas画线技巧
正统的HTML5 Canvas中如下代码 复制代码代码如下: ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(10, 100); ctx.lineTo(3 ...
- 毛边效果 html,Html5中Canvas画线有毛边如何解决
Html5 Canvas 所有的画线指令画出来的线条都有毛边(比如 lineTo, arcTo,strokeRect),这是因为在Canvas中整数坐标值对应的位置恰巧是屏幕象素点中间的夹缝,那么当按 ...
- canvas实现动态点线背景,鼠标画点连线。
html: <canvas id="canvas"></canvas> css: canvas{display: block;width: 100%;hei ...
- canvas擦除画的线但不擦除背景
canvas擦除画的线但不擦除背景 首先html文件中如下写,图片的话,自己随便找一张. <!DOCTYPE html> <html lang="en"> ...
- 实现js动态创建img并使用canvas画线连接
实现js动态创建img,使用canvas画线连接img,当背景图更换时,重新绘制img及连接线. 前台页面 @{ Layout = null; } <!DOCTYPE html> ...
- android+canvas+图片,android 开发 View _12_ 用Canvas 绘制一张图片(博客中演示用Canvas画验证码图片)...
packagenet.yt.yuncare.widgets;importandroid.graphics.Bitmap;importandroid.graphics.Canvas;importandr ...
- 心电图特效代码 html5,用canvas画心电图的示例代码
本文介绍了用canvas画心电图的示例代码,分享给大家,具体如下: 效果图: 思路: ?1.模拟点(如果你有真实的数据,那就是把数据幻化成canvas对应的坐标点) ? 模拟点时注意的点就是高起部分需 ...
- 如何用 canvas 画出分形图
前言 分形是一门以非规则几何形态为研究对象的几何学,由曼德勃 罗(B.B.Mandelbrot)等人创立并命名. 分形图从整体上看,是处处不规律的.但从局部观察,图形的规则性又是相同的,即具有自相似的 ...
最新文章
- 长篇自动驾驶技术综述论文(上)
- pytroch 数据集 datasets DataLoader示例
- 61条面向对象设计的经验原则
- python练手_Python数据分析练手项目
- Oracle 中使用 fetch bulk collect into 批量效率的读取游标数据
- Ubuntu20.04 更新后黑屏无法加载驱动
- dos命令窗口光标闪烁_10 分钟上手 Vim,常用命令大盘点
- 百度Android在线语音识别SDK用法
- CS224N笔记——反向传播
- 网络空间搜索引擎全方位评测
- reimage许可证密钥_思科 ASA 和 Firepower 威胁防御重新映像指南
- 电脑热点和虚拟机网卡冲突
- 调用百度地图进行路线规划
- vue-baidu-map 百度地图(定位替换图标,添加标签)
- CH340G USB转串口接口定义
- 极速掌握HTML(一)基础入门
- 一对一家教如何辅导_大学生家教一对一上门辅导有用吗 收费标准是怎样的
- humanoid 动画鬼畜的问题
- 学习笔记-会话技术CookieSession
- Theo de Raadt:大嘴OpenBSD创始人