html5画一个圆点,HTML5 Canvas绘制圆点虚线实例

ゝ一世哀愁。 2022-10-05 12:46 326阅读 0赞

HTML5 Canvas 提供了很多图形绘制的函数，但是很可惜，Canvas API只提供了画实线的函数(lineTo)，却并未提供画虚线的方法。这样的设计有时会带来很大的不便，《JavaScript权威指南》的作者David Flanagan就认为这样的决定是有问题的，尤其是在标准的修改和实现都比较简单的情况下 (“…something that is so trivial to add to the specification and so trivial to implement… I really think you’re making a mistake here” — http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2007-May/011224.html)。

在Stack Overflow上，Phrogz提供了一个自己的画虚线的实现(http://stackoverflow.com/questions/4576724/dotted-stroke-in-canvas)，严格的说，这是一个点划线的实现(p.s. 我认为该页面上Rod MacDougall的简化版更好)。那么，如果需要画圆点虚线(如下图所示)，应该怎么办呢？

![72130134\_1][72130134_1]

以下是我自己的实现，只支持画水平的和垂直的圆点虚线，可以参考Phrogz与Rod MacDougall的方法来添加斜线描画的功能。

复制代码代码如下:

var canvasPrototype = window.CanvasRenderingContext2D && CanvasRenderingContext2D.prototype;

canvasPrototype.dottedLine = function(x1, y1, x2, y2, interval) \{

if (!interval) \{

interval = 5;

\}

var isHorizontal=true;

if (x1==x2)\{

isHorizontal=false;

\}

var len = isHorizontal ? x2-x1 : y2-y1;

this.moveTo(x1, y1);

var progress=0;

while (len > progress) \{

progress += interval;

if (progress > len) \{

progress = len;

\}

if (isHorizontal) \{

this.moveTo(x1+progress,y1);

this.arc(x1+progress,y1,1,0,2\*Math.PI,true);

this.fill();

\} else \{

this.moveTo(x1,y1+progress);

this.arc(x1,y1+progress,1,0,2\*Math.PI,true);

this.fill();

\}

\}

\}

[72130134_1]: http://image97.360doc.com/DownloadImg/2016/05/1907/72130134_1

发表评论取消回复

表情：

评论列表（有 0 条评论，326人围观）

还没有评论，来说两句吧...

相关阅读

相关 html5canvas中波浪线怎么画,html5 canvas画波浪

要实现这样的动画普通的CSS3是鞭长莫及了，只能使用Canvas。好在使用canvas也非常简单。 Step1. 新建一个画布()元素，并放在所有按钮和logo的下方以免遮

朴灿烈づ我的快乐病毒、/ 2022年10月12日 01:20/ 0 赞/ 155 阅读

相关 html5绘制div,HTML5 Canvas 绘制图像

canvas可以引入图像，它可以用于图片合成或者制作背景等。只要是 Gecko 支持的图像(如 PNG，GIF，JPEG等)都可以引入到 canvas 中，而且其它的 canv

本是古典何须时尚/ 2022年10月06日 13:56/ 0 赞/ 389 阅读

相关 html5画一个圆点,HTML5 Canvas绘制圆点虚线实例

HTML5 Canvas 提供了很多图形绘制的函数，但是很可惜，Canvas API只提供了画实线的函数(lineTo)，却并未提供画虚线的方法。这样的设计有时会带来很大的不便

ゝ一世哀愁。/ 2022年10月05日 12:46/ 0 赞/ 327 阅读

相关 html5 canvas 画直线,HTML5 Canvas画线技巧——实现绘制一个像素宽的细线

正统的HTML5 Canvas中如下代码复制代码代码如下: ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(10, 10

男娘i/ 2022年10月05日 11:58/ 0 赞/ 340 阅读

相关 Canvas学习：绘制虚线和圆点线

[上一节中][Link 1]，使用`moveTo()`、`lineTo()`和`stroke()`可以很轻易的在Canvas中绘制出实线（线段）。整篇文章中看到的都是绘制实现。

阳光穿透心脏的1/2处/ 2022年09月30日 04:59/ 0 赞/ 1288 阅读

相关 html5 canvas画云

使用函数画出天空的云层图像： ![云层][SouthEast]y 主要使用到的是数学的圆与弧度之间转换关系：代码如下

亦凉/ 2022年08月26日 12:21/ 0 赞/ 782 阅读

相关【Html5】canvas绘制圆形

上一篇中写了滤镜的效果，这一次把滤镜效果写在圆上，和上一篇原理是一样的先截个图： ![1334153306_3907.png][]

喜欢ヅ旅行/ 2022年06月13日 11:30/ 0 赞/ 352 阅读

相关【html5每日练习】html5 canvas画线

现在网络最火的是html5，没有之一，虽然正式版还没有出，但咱们可以期待着在未来几年，html5会霸占了互联网，所以毫无疑问得加入到html5的学习之中，谁学得快，谁就有可能把

港控/mmm°/ 2022年06月13日 10:50/ 0 赞/ 352 阅读

相关 [html5 canvas]用html5的canvas画一个可移动的方块

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

灰太狼/ 2022年04月18日 04:48/ 0 赞/ 513 阅读

相关用HTML5的canvas标签画虚线

原生代码 function drawDashLine(ctx, x1, y1, x2, y2, dashLength){ //ctx 声明的

深藏阁楼爱情的钟/ 2021年09月14日 09:26/ 0 赞/ 734 阅读