黑马程序员技术交流社区
标题:
【上海校区】canvas 奇巧淫技（二）绘制箭头路径效果
[打印本页]
作者:
不二晨
时间:
2018-8-13 09:57
标题:
【上海校区】canvas 奇巧淫技（二）绘制箭头路径效果
线的绘制样式
在canvas 的应用中我们经常会遇到各种线样式的绘制，比如虚线，渐变线，带pattern 线（箭头，铁轨图标等），或者虚线与pattern 的动画效果。如下图所示，总结下实现方法。
虚线样式
利用 CanvasRenderingContext2D.setLineDash 的方法设置虚线样式， 接受一个数组类型的参数([solid: number, empty:number]) ，表示实线虚线的像素比例.
比如 ctx.setLineDash([10, 5])，就可以画出上图的虚线效果。发挥想象可以做出更多奇特效果。比如让虚线动起来，有走马灯的感觉。。
渐变线样式
通过 createLinearGradient 函数创建渐变，然后设定其渐变色段， 赋值给strokeStyle，渐变效果如开头图所示
// 创建一个从左到右的渐变，从绿色渐变到几乎透明，var gradient = ctx.createLinearGradient(0, 0, 600, 0);gradient.addColorStop(0, "rgba(0,255,100,0.9)");gradient.addColorStop(1, "rgba(255,255,255,0.1)");ctx.strokeStyle = gradient;复制代码有个问题就是如果需要
渐变方向符合线条走向
，这是常见需求，只需要提前算下每条线的范围和方向，创建对应的LinearGradient 即可，其实类似于下面的箭头绘制，需要
反算 atan 角度
一样的。
icon pattern 的线样式
最后这个算是综合的应用，我写了些canvas functions 放到了之前的canvasOverlay 里面去用，可以方便的集成到各种支持canvas 的lib 里面用。基本思路就是：（懒得画图了，思路比较简单）
每一个
有向线段
根据startPnt, endPnt 坐标反算 atan 弧度角
设定一个stepSize，在线段上生成绘制图标的坐标，把ctx.原点平移到这个点，并且旋转弧度角去绘制 图标的偏向（熟悉canvas 的应该都明白，通过操作canvas 坐标轴去绘制旋转要素）
需要注意的是
，atan弧度角的计算在第二三象限，会跟第一四象限混淆。比如向左下角的
有向线的向量
是两个负值，但是tan 值是正的，跟第一象限一样，所以反算的时候也会算出来小于90度的角，实际上是大于180 的角度了，需要 + Math.PI
大概的绘制过程，code as follow:
function generatePoints(startP, endP, stepSize = 30, ctx, aniOffset = 0.5, img) { let radA = Math.atan((endP[1] - startP[1]) / (endP[0] - startP[0])); if ((endP[0] - startP[0]) < 0) { radA += Math.PI; } const dist = calcDist(startP, endP); let points = []; const steps = dist / stepSize; const drawImg = (pX, pY) => { if (img && ctx) { ctx.save(); ctx.translate(pX , pY); // consider img position and imgWidth/Height. ctx.rotate(radA); ctx.drawImage(img, -img.width / 2, -img.width/2); ctx.restore(); } } // gen points by stepSize.. if enable corner arrow, start s with (0~1) float number. for (let s = aniOffset; s <= steps; s += 1) { const pX = Math.round(startP[0] + s * stepSize * Math.cos(radA)); const pY = Math.round(startP[1] + s * stepSize * Math.sin(radA)); points.push([pX, pY]); drawImg(pX, pY); } // console.warn(`icon Number: ${points.length}`); return points;}
【转载】
作者：alex2wong
链接：
https://juejin.im/post/5b6fb077f265da280b7748b0
作者:
小影姐姐
时间:
2018-8-13 10:30
赞
作者:
梦缠绕的时候
时间:
2018-8-16 16:14
作者:
不二晨
时间:
2018-8-16 17:18
奈斯
欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)
黑马程序员IT技术论坛 X3.2
赞