canvas绘制图表（一）

Berwin 发布于2019-08-05 17:44 / 1806人阅读

摘要：图表是数据表示的一种直观的形式，前端开发经常回合图表打交道，一般都会借用第三方的库，如等，但如果只是很简单的图标，我们完全可以自己绘制，现在我们来绘制一个简单的百分比展示图表最终效果如下代码额，很简单，随便放在某个地方绘制一个圆弧注意点一些

图表是数据表示的一种直观的形式，前端开发经常回合图表打交道，一般都会借用第三方的js库，如echats、bizchats等，
但如果只是很简单的图标，我们完全可以自己绘制，现在我们来绘制一个简单的百分比展示图表

最终效果如下

html代码

额，很简单，随便放在html某个地方

绘制一个圆弧

注意点

1.一些如宽度，半径的数据尽量做成可配置的，我先配置如下4个属性

let config = {
    width: 300,     //画布的宽
    height: 300,    //画布的高
    radius: 100,    //圆弧半径
    lineWidth: 30,  //圆弧线条宽度
    bgBase: "#000", //未填充背景色
    bgFill: "red", //填充背景色
    data: 1         //数据，百分比，20%应写成0.2
}

2.最终圆弧的两端要是圆的
ctx.lineCap = "round"

3.圆弧起始尽量从0开始，便于计算

4.从0开始的圆弧需要位移旋转等操作，注意canvas的位移旋转需要在绘制图形前设置

效果

代码

let config = {
    width: 300,     //画布的宽
    height: 300,    //画布的高
    radius: 100,    //圆弧半径
    lineWidth: 30,  //圆弧线条宽度
    bgBase: "#000", //未填充背景色
    bgFill: "red", //填充背景色
    data: 0.5         //数据，百分比，20%应写成0.2
}

let canvas =  document.getElementById("canvas")
canvas.width = config.width
canvas.height = config.height

let ctx = canvas.getContext("2d")

ctx.save()
ctx.beginPath()
ctx.translate(config.width/2,config.height/2);
ctx.rotate(0.6*Math.PI)
ctx.lineWidth = config.lineWidth
ctx.lineCap = "round"
ctx.strokeStyle = config.bgBase
ctx.arc(0,0,config.radius,0,1.8*Math.PI)
ctx.stroke()
ctx.beginPath()
ctx.arc(0,0,config.radius,0,1.8*Math.PI*config.data)
ctx.strokeStyle = config.bgFill
ctx.stroke()
ctx.restore()

绘制百分比数值

注意设置字体大小时后要跟字体名，否则会无效，如：
ctx.font = "30px Arial"

代码

ctx.save()
ctx.beginPath()
ctx.font = "30px Arial"
ctx.textAlign = "center"
ctx.textBaseline = "middle"
ctx.fillText(config.data*100 + "%",config.width/2,config.height/2)
ctx.restore()

idc机房托管专线服务图表绘制绘制图表 python图表绘制 Canvas

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/59853.html

怎样用JavaScript和HTML5 Canvas绘制图表

摘要：饼状图将数据用切割成份的圆来展示。至于半径，我们用宽度的一半与高度的一半的较小值，因为我们不想让饼状图超出。结果看起来如下这样绘制圆环图我们已经看到如何创建饼状图。怎样画洞呢我们可以画一个白色的圆在饼状图上。 showImg(https://segmentfault.com/img/bVObDh?w=850&h=362); 原文：https://code.tutsplus.com/zh...

doodlewind 2019-08-21 15:50 评论0 收藏0
怎样用JavaScript和HTML5 Canvas绘制图表

摘要：饼状图将数据用切割成份的圆来展示。至于半径，我们用宽度的一半与高度的一半的较小值，因为我们不想让饼状图超出。结果看起来如下这样绘制圆环图我们已经看到如何创建饼状图。怎样画洞呢我们可以画一个白色的圆在饼状图上。 showImg(https://segmentfault.com/img/bVObDh?w=850&h=362); 原文：https://code.tutsplus.com/zh...

wizChen 2019-08-05 11:18 评论0 收藏0
canvas绘制图表（一）

摘要：图表是数据表示的一种直观的形式，前端开发经常回合图表打交道，一般都会借用第三方的库，如等，但如果只是很简单的图标，我们完全可以自己绘制，现在我们来绘制一个简单的百分比展示图表最终效果如下代码额，很简单，随便放在某个地方绘制一个圆弧注意点一些图表是数据表示的一种直观的形式，前端开发经常回合图表打交道，一般都会借用第三方的js库，如echats、bizchats等，但如果只是很简单的图标...

yzd 2019-08-26 10:25 评论0 收藏0
18个基于 HTML5 Canvas 开发的图表库

摘要：是一个基于的图表库。类似于的财经图表工具，是一个基于的图表项目。基于特性开发的饼图工具，拥有漂亮的动画效果。是一个简单的库，可用于创建基于元素的图表。基于开发的可视化数据图表。是另外一个结合特性开发的跨浏览器图表库，兼容主流浏览器。如今，HTML5 可谓如众星捧月一般，受到许多业内巨头的青睐。很多Web开发者也尝试着用 HTML 5 来制作各种各样的富 Web 应用。HTML 5 规...

lemanli 2019-08-02 17:58 评论0 收藏0
canvas绘制图表（二）

摘要：图表是数据表示的一种直观的形式，前端开发经常回合图表打交道，一般都会借用第三方的库，如等，但如果只是很简单的图标，我们完全可以自己绘制，现在我们来绘制一个简单的百分比展示图表最终效果如下代码额，很简单，随便放在某个地方分析从最终效果来看，这图表是数据表示的一种直观的形式，前端开发经常回合图表打交道，一般都会借用第三方的js库，如echats、bizchats等，但如果只是很简单的图标...

Sanchi 2019-08-05 17:44 评论0 收藏0