canvas绘制虚线setLineDash

ゞ浴缸里的玫瑰 2021-07-24 16:06 563阅读 0赞

window.onload=function(){
    			
    			ctx.beginPath();
    	    	ctx.setLineDash([]);//设定实线与空白的大小
    	 		ctx.moveTo(50,100);
           		ctx.lineTo(250,100);
           		ctx.stroke();
           		
           		ctx.beginPath();
    	    	ctx.setLineDash([4]);//设定实线与空白的大小
    	 		ctx.moveTo(50,120);
           		ctx.lineTo(250,120);
           		ctx.stroke();
           		
           		ctx.beginPath();
    	    	ctx.setLineDash([4,2]);//设定实线与空白的大小
    	 		ctx.moveTo(50,140);
           		ctx.lineTo(250,140);
           		ctx.stroke();
           		
           		ctx.beginPath();
    	    	ctx.setLineDash([10,3,1]);//设定实线与空白的大小
    	 		ctx.moveTo(50,160);
           		ctx.lineTo(250,160);
           		ctx.stroke();
           		
           		ctx.beginPath();
    	    	ctx.setLineDash([10,3,3,3,3]);//设定实线与空白的大小
    	 		ctx.moveTo(50,180);
           		ctx.lineTo(250,180);
           		ctx.stroke();
    		}

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng_size_16_color_FFFFFF_t_70]: /images/20210724/13c30c6a293848b0a796a55b7ca50231.png

发表评论取消回复

表情：

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

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

相关阅读

相关 php虚线园的代码,canvas画虚线圆

本文要实现的图形 ![bVFVJg?w=121&h=122][bVFVJg_w_121_h_122] 一个简单的占比统计。。实现的方案是html js合成首先是简单

本是古典何须时尚/ 2023年01月17日 04:55/ 0 赞/ 277 阅读

相关 html canvas 绘制倒影,canvas

JavaScript let t = 0; const colors = \["\161616", "\cf894c", "\c74962"\]; const canva

系统管理员/ 2022年10月10日 06:24/ 0 赞/ 258 阅读

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

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

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

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

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

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

相关 Android 中实现绘制虚线

在Android 开发中，有时我们需要绘制虚线如下图： ![这里写图片描述][70] drawable里面创建bg\_dotted\_line.xml <?x

落日映苍穹つ/ 2022年05月31日 13:26/ 0 赞/ 517 阅读

相关 threejs 绘制多段虚线

threejs 绘制多段虚线在三维的webgl类库threejs下，绘制多段实线没有问题；使用同样的方式绘制多段虚线却出现了问题。简单说明一下，虚线绘制时，类库的方法是

ゝ一纸荒年。/ 2022年03月10日 15:38/ 0 赞/ 553 阅读

相关小程序canvas画虚线圆

效果： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3U

约定不等于承诺〃/ 2021年12月11日 13:13/ 0 赞/ 432 阅读

相关 canvas 绘制虚线

一.分析原理是：求出AB点之间的长度，再设置虚线的长度dashLength，把AB是我长度/虚线长度dashLength 就是虚线数量，根据虚线数量，长度就可以得到当第i个

阳光穿透心脏的1/2处/ 2021年09月12日 01:36/ 0 赞/ 517 阅读

相关 canvas绘制虚线setLineDash

window.onload=function(){ ctx.beginPath(); ctx.setLineDash(

ゞ浴缸里的玫瑰/ 2021年07月24日 16:06/ 0 赞/ 564 阅读

相关 canvas 图片绘制、视频绘制

canvas 1.canvas中绘制图片: img对象.onload=function(){ bi.drawImage

た入场券/ 2021年07月24日 11:36/ 0 赞/ 549 阅读