canvas绘制不规则线条，类似画板的画笔，基于zrender

最新推荐文章于 2022-03-07 19:22:12 发布
最新推荐文章于 2022-03-07 19:22:12 发布
阅读量1k 收藏 3
点赞数 1
文章标签： canvas绘制线条 zrender实现画笔功能
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44840212/article/details/103493561
版权

本文介绍绘制类似画板中画笔功能的线条
zrender实现简易画板功能可绘制大部分常用图形在文章末尾可参考

多数情况下绘制线条首先想到的是用Line绘制，当然1或2像素的细线没什么问题
当线条变宽就有意想不到的惊喜出现了，如下图：（使用Line实例绘制）
在这里插入图片描述

看到上图有朋友会想是因为Line是直线，拐弯Line无法绘制圆角
那么为了使线条圆润可以使用Circle来绘制线条，当然这个想法很好，试一下
绘制的效果如下图：（使用Circle实例绘制）
在这里插入图片描述

看到这两种方式好像发现点什么，Line绘制细线和笔直的线性效果不错，Circle绘制的线条拐角比较圆润
这样好像恰恰弥补了各自的不足

那么两者结合起来会怎样呢？
效果如下图：

最低0.47元/天 解锁文章
跳恰恰的夫子
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
canvas画不规则多边形_详解HTML5 Canvas绘制不规则图形时的非零环绕原则
weixin_39874379的博客
12-19 376
路径方向与非零环绕原则平时我们画的图形都是规规矩矩的，那么如果我们用线条画了个抽象派作品，就像下面这图一样，童鞋们知道怎么用fill()染色呢？这里就要用到数学上的一个方法——非零环绕原则，来判断哪块区域是里面，哪块区域是外面。接下来，我们具体来看下什么是非零环绕原则。首先，我们得给图形确定一条路径，只要“一笔画”并且“不走重复路线”就可以了。如图，标出的是其中的一种路径方向。我们先假定路径的正方...
canvas画不规则多边形_Canvas 不规则曲线图
weixin_39554170的博客
12-19 329
JavaScript语言：JaveScriptBabelCoffeeScript确定var canvas = document.getElementById('pic');context = ctx = canvas.getContext('2d');var page = document.getElementById('pic');canvas.width = page.clientWidth;...
vue页面绘图_GitHub - Mchen1197729/vue-draw: 利用Vue&Zrender编写的一个简易的画图页面...
weixin_30595367的博客
02-22 1137
画板小项目的一些知识点总结画图的原理:画图分为三个步骤：1.点击鼠标左键一次,选择起始点(对于直线、矩形来说就是确定起点,对于圆形来说就是确定圆心)2.拖动鼠标选择终点,在这个阶段不断的修改图形终点的坐标属性(对于直线、矩形来说就是确定终点,对于圆形来说就是确定圆的半径)3.再次点击鼠标左键确定图形的终点,至此画图完成1.Event接口中两个重要的属性e.currentTarget:只读属性 永远...
canvas在图片上绘制标记，可拖拽、缩放，基于ZRender
weixin_44840212的博客
03-23 3129
如下图所示，在图片上做标记，如圆形、矩形等。 该demo实现画布在页面布局中缩放后居中显示，可拖拽、缩放、做标记说明。 项目下载地址：https://gitlab.com/zhangcw66/draw_mark 如粘贴以下代码，请安装zrender <template> <div class="draw-mark"> <div id="canvas" style...
ZRender
weixin_30603633的博客
09-11 133
https://ecomfe.github.io/zrender-doc/public/ 转载于:https://www.cnblogs.com/cnki/p/9630552.html
Canvas画板钢笔绘制线条特效
06-24
"Canvas画板钢笔绘制线条特效"是一个利用Canvas API实现的交互式功能，用户可以通过模拟钢笔工具在画板上绘制线条，并且能够实现动态的动画效果，比如这里提到的“导火线燃烧动画”。下面我们将详细探讨如何使用...
HTML5 Canvas画板钢笔绘制线条特效.zip
07-11
代码片段： button {  -webkit-appearance: none;  padding: 12px 24px;  border-radius: 0;  position: fixed;  left: 50%;  bottom: 24px;  -webkit-transform: translateX(-50%);... }
Canvas画板钢笔绘制线条特效特效代码
03-20
"Canvas画板钢笔绘制线条特效特效代码"是一个利用Canvas API实现的创新性项目，它通过模拟钢笔工具来绘制线条，并且添加了独特的动画效果，如导火线燃烧的视觉表现。这个项目对于提升网页交互性和视觉吸引力有着显著...
详解HTML5 Canvas绘制不规则图形时的非零环绕原则
09-28
主要介绍了HTML5 Canvas绘制不规则图形时的非零环绕原则,文中列举了圆环及镂空剪纸效果的编写示例,需要的朋友可以参考下
html5 canvas绘制线条组合几何体动画特效
06-11
Canvas API提供了`moveTo()`和`lineTo()`方法来绘制直线，`strokeStyle`属性用于设置线条颜色，而`stroke()`方法则用于实际绘制线条： ```javascript ctx.strokeStyle = 'blue'; // 设置线条颜色 ctx.moveTo(50, 50...
用zrender制作一个基础的绘图板，绘图板可用于组态界面的基础性开发
tstmeng的博客
01-08 1149
用zrender制作一个基础的绘图板，绘图板可用于组态界面的基础性开发，zrender开发文档地址：https://ecomfe.github.io/zrender-doc/public/api.html <template> <div class="hello"> <div id="main"> </div>...
zrender基础入门，简单的案例图形绘制
qq_45549336的博客
06-11 5819
一、简单介绍 ZRender是二维绘图引擎，它提供 Canvas、SVG、VML 等多种渲染方式。ZRender也是ECharts的渲染器。 流程图： 二、使用入口 (1)npm install zrender，因为zrender不是浏览器自带不同于前面的canvas与svg，需要先下载 (2)在header中引入 <script src="./node_modules/zrender/dist/zrender.js"></script> 三、案例上代码 看注释！！！看注释！！
html5 画不规则的线条,html5 Canvas画图教程(7)—canvas里画曲线之quadraticCurveTo方法...
weixin_35188854的博客
06-04 832
继续讲canvas中画曲线的方法，今天讲quadraticCurveTo。说实话这个方法有点吓人，单从函数名称上都可以初体验。话说，我觉得有必要把这个函数名缩短。quadratic的意思是二次，即数学中二次元方程那个二次。而ctx.quadraticCurveTo的参数如下：ctx.quadraticCurveTo(x1,y1,x,y);其中x,y是终点的坐标，而x1,y1是曲线控制点的坐标？什么...
使用ZRender画贝塞尔曲线
OrangeJ
11-16 5483
背景最近设计师控制不住自己的洪荒之力，设计图搞得高端大气上档次，各种曲线满天飞。为了更好地实现页面效果，经常需要绘制形如下图的贝塞尔曲线： 一般实现这种效果有两种思路：SVG和Canvas。直接使用Canvas去画贝塞尔曲线比较繁琐，故在开发中使用了ZRender.js这款Canvas库。ZRender简介ZRender是EChart的底层库，功能十分强大，可以很方便地在Canvas中绘制各种图形
使用ZRender类库画直线、圆弧、曲线以及点在线上的运动
破风晓的博客
04-29 5038
最近在学习Zrender类库，并利用Zrender 让点在直线、圆弧、曲线上运动。大概的写了一些. Zrender是二维绘图引擎，它提供 Canvas、SVG、VML 等多种渲染方式。ZRender 也是 ECharts 的渲染器. 这里我运用的是Canvas画布去画的.想了解Zrender内的属性，请点击这个ZRender文档链接 若想了解如何画圆、直线等可以参考开始使用ZRender.有...
canvas绘制直线、折线、矩形与多边形
热门推荐
zhang_cherry的博客
01-09 1万+
1、canvas的width和height属性与style中的width和height的区别 canvas是html5新增的绘图工具。通过canvas标签创建画布后，它有三个基本要素：id、宽度和高度。 特别注意的是：canvas的宽度和高度不能在style里面设置，因为此时设置的是div的宽度和高度，canvas会使用默认的宽度（300px），高度（150px）。 <canvas id="canvas" width="200px" height="200px" style="border: #138
使用 Canvas 手画不规则多边形，并限制相交线和凹多边形
Coding home - 漂流瓶jz
03-07 4183
简介 使用 Canvas 实现的手画不规则多边形功能。通过鼠标在画面上点击的点作为多边形的顶点，连线形成多边形。除了手画之外，还加入了随机生成和回显，检测多边形横穿，凹凸性的检测。注意：两个点如果靠太近会被认为是同一个点而忽略。闭合区域需要点击图形中的第一个点，或者点击“闭合图形”按钮。 两个 Canvas 图层 由于要实现线条跟随鼠标运动功能，而且 Canvas 的图形无法清除单个绘制命令，因此我用 CSS 的绝对定位，在同一个区域叠加了两个 Canvas 对象。一个在下面，表示已经绘制结束的图形，叫做
使用Canvas绘制不完美/不规则的圆形
dawuafang
05-23 1049
真实世界是不完美的，当我们需要模拟真实世界时，经常需要引入不完美/不规则的形状。比如陨石、雨滴、行星、树叶、绵延的海岸线、云朵等。 本文介绍如何基于Canvas生成随机大小的不完美圆形，所用方法适用于很多场合，一个典型的用例如逼真的下雨场景。 首先我们要了解，在几何学上圆形可以通过增加等边对称多边形边数来无限逼近。 那么所谓不完美圆形，实际可以通过一个不等边不对称的多边形来实现。 要实现不等...
基于canvas实现小圆点在线条上滚动
最新发布
06-01
基于canvas实现小圆点在线条上滚动的步骤如下： 1. 创建一个canvas元素和相应的上下文对象。 2. 使用canvas绘制一条水平或垂直的线条，可以使用`context.moveTo()`和`context.lineTo()`方法来绘制。 3. 创建一个...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值