本

文

摘

要

小伙伴关心的问题：canvas绘图例子 java（js画图用哪些canvas）,本文通过数据整理汇集了canvas绘图例子 java（js画图用哪些canvas）相关信息，下面一起看看。

canvas绘图例子 java（js画图用哪些canvas）

上一篇利用canvas绘制矩形的原理royal：3-利用Canvas绘制柱状图（原理-绘制矩形）简单绘制了一个柱状图（假数据），这一篇就利用canvas绘制弧线的原理简单绘制一个扇形图，用于假设以后数据的形象呈现。步骤与上一篇基本一致。

主要知识点：

var deg=Math.PI/180

ctx.arc(300,300,200,0*deg,270*deg,true)代表画一个圆心在（300,300），半径为200，开始的角度为0度（即x轴正方向），结束的角度为270度的圆弧。true表示为逆时针，反之为顺时针

实现步骤

第一步创建 Canvas

在body标签中创建Canvas元素；在其上添加style标签，给canvas设置边框，以便在网页中寻找它的位置；标签下面创建script脚本，在脚本中获取canvas元素，并获取它的2D渲染。

代码实现：

<style> #box { border: 1px gray solid; /* width:200px; height: 200px; 下面详细介绍为什么不在这里设置canvas宽高*/ } </style> <canvas id="box" width="600" height="600"> 如果浏览器不支持canvas，就会显示此文本 </canvas> <script> var canvas = document.querySelector("#box") var ctx = canvas.getContext("2d") //Context 上下文，canvas的2D渲染 ctx.lineWidth=10//线条宽度 ctx.strokeStyle="red"//线条颜色 </script>

第二步 画简单圆弧

ctx.arc(300,300,200,0*deg,270*deg,true)代表画一个圆心在（300,300），半径为200，开始的角度为0度（即x轴正方向），结束的角度为270度的圆弧。true表示为逆时针，反之为顺时针

代码实现：

<script> var canvas = document.querySelector("#box") var ctx = canvas.getContext("2d") //ctx.lineWidth=2//线条宽度 //ctx.strokeStyle="red"//线条颜色 let deg=Math.PI/180 ctx.arc(300,300,200,0*deg,360*deg,true) ctx.fill() ctx.stroke() </script>

第三步 绘制扇形图

基本思想：

创建一个对象（假数据），根据对象的值分配圆的大小，形成扇形图

代码实现：

var arr = [{ name: "衣服", money: 8000 }, { name: "car", money: 2000 }, { name: "food", money: 7000 }, { name: "cash", money: 1000 },{ name: "cash2", money: 5000 },{ name: "cash3", money: 5400 }] arr.total=0; //算出总共的money数 for(var i=0;i<arr.length;i++){ arr.total+=arr[i].money; } var deg=Math.PI/180 //将PI分成180度，每一度占多少 var start=45 //设置开始的角度是45，每一次绘制弧线结束的角度作为下一次的开始角度 arr.forEach((el)=>{ ctx.beginPath(); n=(el.money/arr.total)*360 ctx.arc(300,300,200,start*deg,(start+n)*deg)//以45度开始 ctx.lineTo(300,300) start+=n // 每一次从结束的角度开始 ctx.fill() //默认黑色 ctx.stroke() })

完善代码：每一块扇形用随机颜色表示

var r=parseInt(Math.random()*255) var g=parseInt(Math.random()*255) var b=parseInt(Math.random()*255) str.fillStyle=`rgb(${r},${g},${b})`

或者

var colorx = Math.floor(Math.random() * 16777215).toString(16); ctx.fillStyle== "#" + colorx;

完整代码

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <style> #box { border: 1px gray solid; /* width:200px; height: 200px; */ } </style> <canvas id="box" width="600" height="600"> 显示 </canvas> <script> var canvas = document.querySelector("#box") var ctx = canvas.getContext("2d") //Context 上下文，canvas的2D渲染 // ctx.lineWidth=2//线条宽度 // ctx.strokeStyle="red"//线条颜色 // ctx.rect(100,100,100,100)// // ctx.fillStyle="blue" var arr = [{ name: "衣服", money: 8000 }, { name: "car", money: 2000 }, { name: "food", money: 7000 }, { name: "cash", money: 1000 },{ name: "cash2", money: 5000 },{ name: "cash3", money: 5400 }] arr.total=0; //算出总共的money数 for(var i=0;i<arr.length;i++){ arr.total+=arr[i].money; } var deg=Math.PI/180 var start=45 arr.forEach((el)=>{ ctx.beginPath(); var r=parseInt(Math.random()*255) var g=parseInt(Math.random()*255) var b=parseInt(Math.random()*255) ctx.fillStyle=`rgb(${r},${g},${b})` n=(el.money/arr.total)*360 ctx.arc(300,300,200,start*deg,(start+n)*deg)//以45度开始 ctx.lineTo(300,300) start+=n ctx.fill() ctx.stroke() }) </script> </body> </html>

最终呈现：

更多canvas绘图例子 java（js画图用哪些canvas）相关信息请关注本站，本文仅仅做为展示！