canvas画虚线圆

最新推荐文章于 2024-08-18 02:27:21 发布
最新推荐文章于 2024-08-18 02:27:21 发布
阅读量766 收藏 2
点赞数
文章标签： javascript ViewUI
原文链接：https://segmentfault.com/a/1190000007571098
版权

本文要实现的图形
图片描述

一个简单的占比统计。。

实现的方案是html js合成

首先是简单的HTML布局

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"> 
<title>statistics</title>
<script src="jquery.min.js"></script>
</head>
<body>
<style>
    .zh-chart {
        width: 100px;
        height: 100px;
        background: #142838;
    }
</style>
<div class="zh-chart" data-b="40/50" data-c="20/30" data-d="10/50" data-e="30/30" data-f="20/70"></div>
</body>
</html>

然后通过js来实现我们的最终效果，相应的操作都有注释。

<script>
    var chartEle = $('.zh-chart');
    var canvas = document.createElement('canvas');
    canvas.width = chartEle.width();
    canvas.height = chartEle.height();
    var radius = canvas.width/2;
    chartEle.append(canvas);
    var ctx = canvas.getContext('2d');
    // 内圆
    ctx.arc(radius, radius, radius*2/3, 0, 2*Math.PI);
    ctx.fillStyle="rgba(22,196,203,0.1)";
    ctx.fill();
    ctx.strokeStyle = '#16C4CB';
    ctx.stroke();
    // 虚线圆环
    ctx.translate(radius, radius); // 改变旋转中心
    ctx.beginPath();
    ctx.arc(0, 0, radius*2/3+4, 0, Math.PI/30);
    ctx.strokeStyle = '#16C4CB';
    ctx.stroke();
    ctx.closePath();
    for(var i=0; i<40; i++) {
        ctx.beginPath();
        ctx.rotate(10*Math.PI/180);
        ctx.arc(0, 0, radius*2/3+4, 0, Math.PI/30);
        ctx.strokeStyle = '#16C4CB';
        ctx.stroke();
        ctx.closePath();
    }
    // 外圆环
    ctx.beginPath();
    ctx.arc(0, 0, radius-4, 0, 2*Math.PI);
    ctx.strokeStyle = '#16C4CB';
    ctx.stroke();
    ctx.closePath();
    // 数据渲染
    var data = [
        {val: chartEle.data('b'), color: '#AF4A6F'},
        {val: chartEle.data('c'), color: '#16C4CB'},
        {val: chartEle.data('d'), color: '#887BD0'},
        {val: chartEle.data('e'), color: '#19B478'},
        {val: chartEle.data('f'), color: '#DE725A'}
    ];
    // ctx.rotate(100*Math.PI/180);
    for(var j=0; j<5; j++) {
        var rate = data[j].val.split('/');
        ctx.beginPath();
        ctx.rotate(72*Math.PI/180);
        ctx.arc(0, 0, radius-4, 0, (2*Math.PI)/5*(rate[0]/rate[1]));
        ctx.strokeStyle = data[j].color;
        ctx.lineWidth = 5;
        ctx.stroke();
        ctx.closePath();
    }
</script>

感觉关注~~~~ 啦啦啦

weixin_34336526
关注
小程序canvas画虚线圆
沫沫酱
07-09 1952
效果： 封装： /** * 画虚线园 * cxt_arc 画布 * thex 画的x坐标 * they 画的y坐标 * raduis 圆半径 * space 虚线的间隔 默认值 2 * Math.PI / 100 即一百空白点 */ drawDashCircle: function (cxt_arc, thex, they, raduis, space) { space ...
android 虚线圆角矩形框,android 画虚线、实线，画圆角矩形，一半圆角
weixin_32309879的博客
05-28 1149
1、画虚线，实线：建立dotted_line_gray.xml文件放在drawable文件夹下面。android:shape="line" 可以修改你想要的形状android:shape="line">android:dashWidth="2dp" android:dashGap="3dp" />然后在布局的xml里面：作为ImageView或者Linearlayout等作为背景源就可...
canvas：动态虚线圆
qq_37916164的博客
06-29 1335
1.绘制动态虚线圆形 1.分析 画圆需要arc()，stroke() API 设置画线是虚线而不是实线 setLineDash([number])：设置虚线，参数为数字数组,数字是用来设置虚线每一个小段的长度。比如设置值[4,2]则虚线如【 — - — - — -…】循环出现。 lineDashOffset [=number]：设置虚线的偏移量。 动起来。需要用到setTimeout(function, duration). 每次在setTimeout中绘制时都是属于重新绘制，之前绘制的需要清除 cle
Canvas基础: 绘制虚线
最新发布
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
08-18 1065
Canvas 是一个用于图形渲染的 HTML 元素, 它本身并不具备绘图能力, 而是通过 JavaScript 来控制其上下文, 进行绘图。Canvas API 提供了一系列的方法和属性, 使得开发者可以在页面上绘制出复杂的图形。// 设置虚线样式// 开始绘制// 使用函数。
用canvas绘制圆点虚线的函数
weixin_30929195的博客
11-20 94
实际项目中使用到了这个功能，想着做成一个函数方便日后调用，草草写就，纰漏不少，还是有待完善。目前只能绘制直线和折线。 关于下面那个Object.prototype.extend函数旨在获取一个新对象，不对原有对象进行改变，欢迎赐教。 // JavaScript source code 'use strict'; function dotLine(canvasId, op...
CANVAS绘制虚线和圆点虚线
sensyup的博客
08-09 2671
绘制虚线 在MDN上，我查到一个叫CanvasRenderingContext2D.setLineDash()的API。官方介绍： CanvasRenderingContext2D.setLineDash() 是 Canvas 2D API 设置虚线样式的方法。 使用方式很简单： ctx.setLineDash(segments); 其接受一个参数segments，这个参数
canvas快速入门3：动态虚线圆
wjk_along的博客
02-12 1572
这一章来绘制概述里面的第一个图，非常非常的简单。 1.绘制动态虚线圆形 1.分析 画圆需要arc()，stroke() API 设置画线是虚线而不是实线(本章新增API) setLineDash([number])：设置虚线，参数为数字数组,数字是用来设置虚线每一个小段的长度。比如设置值[4,2]则虚线如【 — - — - — -…】循环出现。 lineDashOffset [=number...
HTML5 Canvas绘制圆点虚线实例
09-28
HTML5 Canvas提供了很多图形绘制的函数，比如绘制矩形、圆角矩形、圆形、贝塞尔曲线等等，但是Canvas API并没有直接提供画虚线的功能。然而，HTML5 Canvas技术在绘制图形时，仅提供了实线的绘制方法（lineTo），并...
Android自定义View实现绘制虚线的方法详解
01-20
虽然Canvas没有提供直接绘制虚线（dash line）的`drawDashLine`方法，但我们可以通过其他方式来实现这一功能。 一种简单的方法是使用Shape Drawable，这是Android提供的XML资源，可以定义不同类型的形状，如线...
android 绘制虚线和虚线圆
北京流年
05-09 3400
项目当中需要绘制一个虚线圆和虚线椭圆，记录一下，以免忘记
Android 使用Canvas+Paint画虚线
热门推荐
码蛋蛋
10-17 1万+
效果图如下：简单实现 Paint mPaintCircle = new Paint(); mPaintCircle.setStyle(Paint.Style.STROKE); mPaintCircle.setAntiAlias(true); mPaintCircle.setStrokeWidth(2); mPaintCir
php虚线园的代码,canvas画虚线圆
weixin_33253331的博客
03-26 123
本文要实现的图形一个简单的占比统计。。实现的方案是html js合成首先是简单的HTML布局statistics.zh-chart {width: 100px;height: 100px;background: #142838;}然后通过js来实现我们的最终效果，相应的操作都有注释。var chartEle = $('.zh-chart');var canvas = document.create...
Android中Paint画图（线、虚线、矩形、多边形、圆形、曲线、半圆、三角形、旋转文字）
aidou1314的博客
10-10 8288
线 private void drawLine(Canvas canvas, float startX,float startY,float stopX,float stopY, float width,int color){ Paint paint = new Paint(); paint.setAntiAlias(true);//抗锯齿 paint.setStyle(Pai
Canvas学习：绘制虚线和圆点线
wulixiaoxiao1的博客
03-18 7456
上一节中，使用moveTo()、lineTo()和stroke()可以很轻易的在Canvas中绘制出实线（线段）。整篇文章中看到的都是绘制实现。不知道你和我是不是一样的好奇，那么要在Canvas中绘制虚线和圆点线又要怎么绘制，在Canvas有没有类似的API能直接绘制呢？ 其实我也很好奇，看了一些资料，要像绘制实线那样简单或者直接，相对来说是没有的，但不用担心，通过其他的方法也是可以实现的。
canvas学习总结四：绘制虚线
diannai2478的博客
06-21 555
上一章节我们说到，线性路径的绘制，主要利用movoTo()，lineTo()等方法，当然 Canvas 2D API 也提供了虚线的绘制方法，CanvasRenderingContext2D.setLineDash(); 下面我们就来看看虚线的绘制方法 语法 ctx.setLineDash(segments); 参数 segments： 一个Array数组。 一...
canvas如何绘制虚线
shengjunlintianxia的博客
05-06 8696
此文来自:马开东云搜索转载请注明出处 网址：http://m.makaidong.com 此文原标题:canvas学习总结四：绘制虚线来源网址：http://m.makaidong.com/beevesnoodles/35089_6022557.html ctx.setLineDash(segments); 参数 segments： 一个Array数组。 一组描述交替绘制线...
HTML5 Canvas 2D API 教程详解
- 绘制图片：可以将图像元素或者数据URL绘制到Canvas上。 - 像素级操作：CREATEIMAGEDATA、GETIMAGEDATA和PUTIMAGEDATA用于创建、获取和更新像素数据。 3. 绘图模型 - 这部分描述了Canvas的绘图流程和原理，帮助...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值