Canvas 绘制虚线(setLineDash())

最新推荐文章于 2024-03-24 21:14:47 发布
最新推荐文章于 2024-03-24 21:14:47 发布
阅读量5.9k 收藏 2
点赞数
分类专栏： Canvas 文章标签： canvas 虚线
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/houyanhua1/article/details/79883544
版权


demo.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <canvas id="cvs"></canvas>
    <script>
        var cvs = document.getElementById('cvs');
        var ctx = cvs.getContext('2d');

        /*
        * 设置画线的时候空白部分和实线部分的大小。
        * ctx.setLineDash( [ 5, 3, 2] )
        * */
        
        /*
        * 设置虚线绘制时的偏移量
        * ctx.lineDashOffset = 3;
        * */

        ctx.lineDashOffset = 3;  //设置虚线的偏移量(线不偏移,只是虚的位置偏移)
        ctx.setLineDash( [ 5, 4, 3] );  //实线部分和白线部分的大小依次是5,4,3,5,4,3...
        ctx.moveTo( 10, 10 );
        ctx.lineTo( 310, 10 );
        ctx.stroke();

        /*
         * 获取线条绘制规则。
         * ctx.getLineDash()
         * */
        console.log(ctx.getLineDash());  //数组,长度是偶数(如果是奇数会乘2变成偶数)
        
    </script>
</body>
</html>


houyanhua1
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Canvas样式
Raccon_的博客
10-27 1349
笔记
canvas案例：绘制虚线
qq_37805832的博客
03-16 5625
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title></title>
QML ShapePath绘制虚线
最新发布
liushiyi3083862599的博客
03-24 284
这两个属性决定了曲线路径的起点。通过设置这些属性，你可以控制直线段的起始位置。在 QML（Qt Modeling Language）中，类型用于描述一个二维路径，可以用来绘制形状、曲线和直线。元素的一个子类型，用于创建两点之间的直线段。是所有路径曲线中最简单的路径曲线。属性来指定直线的终点位置。
canvas如何绘制虚线
shengjunlintianxia的博客
05-06 8528
此文来自:马开东云搜索转载请注明出处 网址：http://m.makaidong.com 此文原标题:canvas学习总结四：绘制虚线来源网址：http://m.makaidong.com/beevesnoodles/35089_6022557.html ctx.setLineDash(segments); 参数 segments： 一个Array数组。 一组描述交替绘制线...
《canvas》之第4章 线条操作
yxqq378287007的博客
06-23 382
canvas 线条操作
canvas基础
qq_36712191的博客
03-21 558
标签       使用 canvas 标签, 即可在页面中开辟一格区域. 可以设置其 width 和 height 设置该区域的尺寸.默认 canvas 的宽高为 300 和 150.不要使用 CSS 的方式设置宽高, 应该使用 HTML 属性.如果浏览器不支持 canvas 标签, 那么就会将其解释为 div 标签. 因此常常在 canvas 中嵌入文本, 以提示
HTML5 Canvas绘制圆点虚线实例
09-28
主要介绍了HTML5 Canvas绘制圆点虚线实例,HTML5并未提供画虚线的方法,本文是根据Stack Overflow的方法修改而来,需要的朋友可以参考下
使用canvas绘制钟表
11-06
使用canvas绘制钟表 使用canvas绘制钟表 使用canvas绘制钟表
vue+canvas绘制图形
01-09
文件中有封装好的绘制圆形、矩形以及不规则图形的方法，直接拿到适合自己的场合下用即可
canvas绘制表盘时钟
08-31
Canvas API 是一种在网页上动态绘制图形的强大工具，它允许开发者通过JavaScript代码进行像素级别的操作，创建出丰富的视觉效果。 首先，我们创建一个HTML文件，并在`<body>`部分设置一个`<canvas>`元素，用于显示...
canvas学习day1——setLineDash虚线渐变矩形，绘制坐标轴
weixin_41571938的博客
04-24 434
setLineDash虚线渐变矩形 ctx.setLineDash( [ 4, 2, 1 ] ); 设置曲线，这个函数里面的参数依次是 实线 空白 实线 空白的宽度，依次循环 效果图 <body> <canvas id="cvs"></canvas> <script> var cvs = document.getElementById('cvs'); var ctx = cvs.getContext('2d')
canvas画正方形、三角形以及虚线
katherin_wanzi的博客
06-18 2124
代码如下 <style> canvas { margin: 0 auto; border: 2px solid #aaa; display: block; /*画布居中*/ } </style> <body> <canvas id="cont" width="500px" height="500px">Hello Canvas</canvas> <script&g
Canvas连续切换绘制虚线和实线
第二世界
12-14 752
待定
绘制虚线－－CGContextSetLineDash详解
学如逆水行舟
08-03 1629
绘图第三篇：CGContextSetLineDash 绘制虚线 就是上边的这个API，怎么用呢？看下边demo: 效果图：
QML 画虚线 ,如何与QPaniter打交道
波风水门
02-24 4576
因为需求所致，想在QML上画虚线，发现QML完全没有用武之地，Canvas都没有这个方法，查阅了HTML的原生Canvas中是有一个setLineDash()可以画虚线的，但是qml中的Canvas是没有继承这个方法的，可能鄙人水平有限，所以只能自己通过C++QPenter来画了，同时页说明了qml如何与QPenter来结合使用。首先我是继承了QQuickPaintedItem这个类，通过这个类只...
QML坑之canvas画虚线出现绘图状态混乱
Kelvin_Yan的专栏
01-18 1645
测试版本：qt 5.12.7 通过setLineDash可以画虚线，但是发现在绘制多个path时，一些是实线，一些是虚线，会出现绘制某个本应是实线的path时变成了虚线，某个本应是虚线的path变成实线。 如 //ctx for context2D ctx.beginPath() ctx.strokeStyle = "black" ctx.lineWidth = 1 ctx.setLineDash([]) //实线 ctx.moveTo(100,100) ctx.lineTo(200,200) ct
canvas描边样式-setLineDash-虚线
caoxinjian423的博客
11-05 746
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>canvas描边样式-setLineDash</title> <style> htm.
canvas绘制虚线图表
netcy的专栏
05-08 405
最近有读者加我微信咨询这个问题，如下图所示： 要实现的效果如下： 其实难度不大，但是考虑一些人员对于canvas不熟悉，还是简单的介绍下。 其实该图表，就是一个圆圈外面在套一个圆弧的效果， 主要的难点在于不知道怎么绘制圆圈的虚线效果。 其实canvas本身已经支持了虚线的绘制，就是一个api调用的事情，api是setLineDash。 示例代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charse
利用setLineDash 和 lineDashOffset 实现跑马灯（流动）效果
chelen_jak的专栏
05-25 3813
原文出处：https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/lineDashOffset”跑马灯“效果是一种动画技巧，经常出现在计算机绘图程序的选项工具中。 它能帮助用户根据图片背景动态变化的边界来区分选择的边界。var canvas = document.getElementById("canvas...
canvas绘制虚线框
08-13
要在Canvas上绘制虚线框，你可以使用以下步骤： 1. 获取Canvas的上下文环境：通过`getContext()`方法获取Canvas的2D上下文环境。 ```javascript var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); ``` 2. 设置虚线样式：使用`setLineDash()`方法设置虚线的样式。这个方法接受一个数组作为参数，用来指定实线和虚线的长度。 ```javascript ctx.setLineDash([5, 5]); // 设置实线和虚线的长度为5 ``` 3. 绘制矩形框：使用`strokeRect()`方法绘制矩形框。该方法接受四个参数，分别是矩形框的左上角x坐标、左上角y坐标、宽度和高度。 ```javascript ctx.strokeRect(x, y, width, height); // 绘制矩形框 ``` 完整的代码示例如下： ```javascript var canvas = document.getElementById('myCanvas');

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值