canvas-绘制曲线/圆弧/扇形/圆/饼图

绘制曲线

<script>window.onload = function () {let canvas = document.querySelector('canvas');if (canvas.getContext) {let ctx = canvas.getContext('2d');setTimeout(() => {ctx.clearRect(0, 0, canvas.width, canvas.height)}, 10000);// 什么是弧度？- 一种长度的描述// 一弧度等一圆的半径// 周长 = 2*π*r = 2*π*弧度 // 1° = π/180// 曲线的绘制-曲线是可以由数学公式得来// 线是由点构成的// 公式：y=2xlet canvasWidth = canvas.width;for (let i = 0; i < canvasWidth; i++) {let x = i;let y = 2 * x;// let y = 50 * Math.sin(x / 10) + 100;ctx.lineTo(x, y);};ctx.stroke();}}
</script>

圆弧

绘制圆弧或者圆，我们使用arc()方法。
注意点：弧度=(Math.PI/180)*角度
arc(x, y, radius, startAngle, endAngle, anticlockwise)：画一个以（x,y）为圆心的以radius为半径的圆弧（圆），从startAngle开始到endAngle结束，按照anticlockwise给定的方向（默认为顺时针）来生成。

绘制圆弧

<script>window.onload = function () {let canvas = document.querySelector('canvas');if (canvas.getContext) {let ctx = canvas.getContext('2d');setTimeout(() => {ctx.clearRect(0, 0, canvas.width, canvas.height)}, 10000);// 根据角度转换成弧度function angleTransformRadin(angle) {// 一个弧度等于一个半径的长度// 圆的周长=2*π*r ==> 2*π*弧度// 一个角度=2*π*弧度/360=π*弧度/180// angle个角度=π/180*angle(弧度)return Math.PI * angle / 180};let canvasWidth = canvas.width;let canvasHeight = canvas.height;// 顺时针// ctx.beginPath();// ctx.arc(canvasWidth / 2, canvasHeight / 2, 150, 0, angleTransformRadin(90));// ctx.stroke();// 逆时针ctx.beginPath();ctx.arc(canvasWidth / 2, canvasHeight / 2, 150, 0, angleTransformRadin(90), true);ctx.stroke();}}
</script>

绘制笑脸

<script>window.onload = function () {let canvas = document.querySelector('canvas');if (canvas.getContext) {let ctx = canvas.getContext('2d');setTimeout(() => {ctx.clearRect(0, 0, canvas.width, canvas.height)}, 10000);for (var i = 0; i < 4; i++) {for (var j = 0; j < 3; j++) {ctx.beginPath();var x = 25 + j * 50; // x 坐标值var y = 25 + i * 50; // y 坐标值var radius = 20; // 圆弧半径var startAngle = 0; // 开始点var endAngle = Math.PI + (Math.PI * j) / 2; // 结束点var anticlockwise = i % 2 == 0 ? false : true; // 顺时针或逆时针ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);if (i > 1) {ctx.fill();} else {ctx.stroke();}}}}}
</script>

绘制扇形

<script>window.onload = function () {let canvas = document.querySelector('canvas');if (canvas.getContext) {let ctx = canvas.getContext('2d');setTimeout(() => {ctx.clearRect(0, 0, canvas.width, canvas.height)}, 10000);// 根据角度转换成弧度function angleTransformRadin(angle) {// 一个弧度等于一个半径的长度// 圆的周长=2*π*r ==> 2*π*弧度// 一个角度=2*π*弧度/360=π*弧度/180// angle个角度=π/180*angle(弧度)return Math.PI * angle / 180};let canvasWidth = canvas.width;let canvasHeight = canvas.height;ctx.moveTo(canvasWidth / 2, canvasHeight / 2);ctx.arc(canvasWidth / 2, canvasHeight / 2, 150, angleTransformRadin(0), angleTransformRadin(30));ctx.closePath();ctx.stroke();}}
</script>

绘制N等分的圆

<script>window.onload = function () {let canvas = document.querySelector('canvas');if (canvas.getContext) {let ctx = canvas.getContext('2d');setTimeout(() => {ctx.clearRect(0, 0, canvas.width, canvas.height)}, 10000);// 根据角度转换成弧度function angleTransformRadin(angle) {// 一个弧度等于一个半径的长度// 圆的周长=2*π*r ==> 2*π*弧度// 一个角度=2*π*弧度/360=π*弧度/180// angle个角度=π/180*angle(弧度)return Math.PI * angle / 180};// 获取16进制的随机颜色function getRandomColor() {return `rgb(${Math.floor(Math.random() * 256)},${Math.floor(Math.random() * 256)},${Math.floor(Math.random() * 256)})`}let canvasWidth = canvas.width;let canvasHeight = canvas.height;let count = 6;let angle = 360 / count;for (let i = 0; i < count; i++) {let startAngle = i * angle;let endAngle = (i + 1) * angle;ctx.beginPath();ctx.moveTo(canvasWidth / 2, canvasHeight / 2);ctx.arc(canvasWidth / 2, canvasWidth / 2, 150, angleTransformRadin(startAngle), angleTransformRadin(endAngle));ctx.fillStyle = getRandomColor();ctx.fill();}}}
</script>

绘制根据数据的饼图

<script>window.onload = function () {let canvas = document.querySelector('canvas');if (canvas.getContext) {let ctx = canvas.getContext('2d');setTimeout(() => {ctx.clearRect(0, 0, canvas.width, canvas.height)}, 10000);// 根据角度转换成弧度function angleTransformRadin(angle) {// 一个弧度等于一个半径的长度// 圆的周长=2*π*r ==> 2*π*弧度// 一个角度=2*π*弧度/360=π*弧度/180// angle个角度=π/180*angle(弧度)return Math.PI * angle / 180};// 获取16进制的随机颜色function getRandomColor() {return `rgb(${Math.floor(Math.random() * 256)},${Math.floor(Math.random() * 256)},${Math.floor(Math.random() * 256)})`}let canvasWidth = canvas.width;let canvasHeight = canvas.height;let data = [5, 30, 10, 5];let countData = data.reduce((prev, curr) => {return prev + curr;});let angleData = data.map(item => {return item / countData * 360});let startAngle = 0;angleData.forEach(item => {let endAngle = startAngle + item;ctx.beginPath();ctx.moveTo(canvasWidth / 2, canvasHeight / 2);ctx.arc(canvasWidth / 2, canvasWidth / 2, 150, angleTransformRadin(startAngle), angleTransformRadin(endAngle));ctx.fillStyle = getRandomColor();ctx.fill();startAngle = endAngle;});}}
</script>

根据数据绘制饼图

<script>window.onload = function () {let canvas = document.querySelector('canvas');if (canvas.getContext) {let ctx = canvas.getContext('2d');// setTimeout(() => {//   ctx.clearRect(0, 0, canvas.width, canvas.height)// }, 10000);let data = [{title: '15-20岁',count: 6},{title: '20-25岁',count: 30},{title: '25-30岁',count: 10},{title: '30以上',count: 8}];class PieChart {constructor(selector) {// 绘制工具this.ctx = document.querySelector(selector).getContext('2d');// 画布的宽度this.canvasWidth = this.ctx.canvas.width;// 画布的高度this.canvasHeight = this.ctx.canvas.height;// 饼图绘制中心this.x0 = this.canvasWidth / 2;this.y0 = this.canvasHeight / 2;// 圆的半径this.radius = 150;// 伸出去线的长度this.outline = 20;// 绘制矩形的大小this.legendWidth = 30;this.legendHeight = 16;this.space = 20;}// 根据角度转换成弧度angleTransformRadin(angle) {// 一个弧度等于一个半径的长度// 圆的周长=2*π*r ==> 2*π*弧度// 一个角度=2*π*弧度/360=π*弧度/180// angle个角度=π/180*angle(弧度)return Math.PI * angle / 180}// 获取16进制的随机颜色getRandomColor() {return `rgb(${Math.floor(Math.random() * 256)},${Math.floor(Math.random() * 256)},${Math.floor(Math.random() * 256)})`}init(data) {this.drawPie(data);}// 绘制饼图drawPie(data) {let allCount = data.reduce((total, curr) => {return total + curr.count}, 0);data.forEach(item => {item.radian = this.angleTransformRadin(item.count / allCount * 360);});let startAngle = 0;data.forEach((item, index) => {let endAngle = startAngle + item.radian;this.ctx.beginPath();this.ctx.moveTo(this.x0, this.y0);this.ctx.arc(this.x0, this.y0, this.radius, startAngle, endAngle);this.ctx.fillStyle = this.getRandomColor();this.ctx.fill();// 绘制文字说明this.drawText(startAngle, item, this.ctx.fillStyle);// 绘制图例this.drawLegend(item, index, this.ctx.fillStyle);startAngle = endAngle;})}// 绘制文字说明drawText(startAngle, item, lineColor) {// 获取斜边的长度let edge = this.radius + this.outline;// 获取x轴直角边的长度let edgeX = Math.cos(startAngle + item.radian / 2) * edge;// 获取y轴直角边的长度let edgeY = Math.sin(startAngle + item.radian / 2) * edge;// 绘制延长线this.ctx.beginPath();this.ctx.moveTo(this.x0, this.y0);this.ctx.lineTo(this.x0 + edgeX, this.y0 + edgeY);this.ctx.strokeStyle = lineColor;this.ctx.stroke();// 绘制文字this.ctx.beginPath();this.ctx.moveTo(this.x0 + edgeX, this.y0 + edgeY);if (edgeX > 0) {this.ctx.direction = 'ltr';} else {this.ctx.direction = 'rtl';}this.ctx.fillText(item.title, this.x0 + edgeX, this.y0 + edgeY);// 绘制文字下划线this.ctx.beginPath();let textWidth = this.ctx.measureText(item.title).width;this.ctx.moveTo(this.x0 + edgeX, this.y0 + edgeY);if (edgeX > 0) {this.ctx.lineTo(this.x0 + edgeX + textWidth, this.y0 + edgeY);} else {this.ctx.lineTo(this.x0 + edgeX - textWidth, this.y0 + edgeY);}this.ctx.stroke();}// 绘制图例drawLegend(item, index, fillStyle) {// 绘制矩形填充this.ctx.beginPath();this.ctx.fillStyle = fillStyle;this.ctx.fillRect(this.space, this.space + index * this.space, this.legendWidth, this.legendHeight);// 绘制文字this.ctx.beginPath();this.ctx.font = '16px 幼圆';this.ctx.direction = 'ltr';this.ctx.textBaseline = 'top'this.ctx.fillText(item.title, this.space + this.legendWidth + 6, this.space + index * this.space);}};new PieChart('canvas').init(data);}}
</script>

canvas-绘制曲线/圆弧/扇形/圆/饼图相关推荐

html 画动画效果,html5 canvas绘制曲线动画特效
特效描述:html5 canvas绘制曲线动画特效. 代码结构 1. HTML代码 Balls Size Speed Delay Go! Presets: Atomic Flower Spiro Y ...
html弧形列表效果,JavaScript+html5 canvas绘制的圆弧荡秋千效果完整实例
本文实例讲述了JavaScript+html5 canvas绘制的圆弧荡秋千效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: demo #canvas { margin:50 ...
Canvas绘制曲线
文章目录圆弧贝塞尔曲线圆弧圆弧使用arc方法绘制,画圆的时候画的弧度是从0到2π,而想要画圆弧就调整参数只画出部分圆即可. const canvas = document.getElement ...
微信小程序canvas绘制曲线图表
先上图不能耽误大家时间.由于也是才入手小程序很多不会代码有点乱看官些能用就用不能用就看看哈. view代码 <view class="efficacy">< ...
Canvas绘制圆滑曲线
canvas 绘制曲线是一个比较容易实现的逻辑,但是对于签名,或者手写板,大屏会议机等设备原生的Canvas.drawPath(); 要求线条曲率完美,直接使用drawPath显然不能满足需求,这方面 ...
android坐标图绘制曲线,Android 曲线图绘制曲线
Android 曲线图 Paste_Image.png 这里我引用了上回介绍的折线图首先我们看看onDrwa 里面做了什么从图里面我们可看到绘制的框线方法,绘制data线方法绘制线上的圆从 ...
使用canvas绘制水滴（二次贝塞尔曲线、圆弧）
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
vue + canvas绘制扇形圆盘
vue + canvas绘制扇形圆盘 html: <canvas style="position: fixed;z-index:-1" width="545&quo ...
html制作曲线,HTML5 canvas基本绘图之绘制曲线
是HTML5中新增的标签,用于绘制图形,实际上,这个标签和其他的标签一样,其特殊之处在于该标签可以获取一个CanvasRenderingContext2D对象,我们可以通过JavaScript脚本来控 ...

canvas-绘制曲线/圆弧/扇形/圆/饼图

绘制曲线

圆弧

绘制圆弧

绘制笑脸

绘制扇形

绘制N等分的圆

绘制根据数据的饼图

根据数据绘制饼图

canvas-绘制曲线/圆弧/扇形/圆/饼图相关推荐

最新文章

热门文章