使用canvas画图形

参考文档：

https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial/Using_images

图形效果：

代码实现：

                        var cartFlag = true;var personFlag = true;if (personFlag) {// 人的图形canvas.beginPath();  // 开始一个新的路径canvas.rect(0, 0, 60, 60);canvas.fillStyle = rgb; //"rgba(255,255,255,0.6)"; //fillcolor + "88";canvas.fill();  // 路径填充方法canvas.closePath(); // 闭合路径，会把路径最后位置和开始点直线相邻，形成闭合区域// 人图片填充var img = new Image();   // 创建一个<img>元素img.onload = function(){canvas.drawImage(img,-10,5,50,50);}img.src = "/assets/images/person.png";// 当前在线人数canvas.fillStyle = '#FF0000';canvas.textAlign = 'right';  //文本绘制时，指定文本的水平对齐方式canvas.textBaseline = 'center'; // 文本绘制时，指定文本对齐的基线canvas.font = '10px sans-serif';  // 在canvas文本绘制时的字号字体控制canvas.fillText(this.population, 40, 20, 20); // 用来填充文字，text:填充文本信息；x:起点横坐标；y:起点纵坐标，maxWidth:文本占据最大宽度// 绘制总数canvas.fillStyle = 'blue';canvas.textAlign = 'right';  //文本绘制时，指定文本的水平对齐方式canvas.textBaseline = 'center'; // 文本绘制时，指定文本对齐的基线canvas.font = '10px sans-serif';  // 在canvas文本绘制时的字号字体控制canvas.fillText("/", 44, 25, 5); // 用来填充文字，text:填充文本信息；x:起点横坐标；y:起点纵坐标，maxWidth:文本占据最大宽度canvas.fillText(90, 54, 35, 15); // 用来填充文字，text:填充文本信息；x:起点横坐标；y:起点纵坐标，maxWidth:文本占据最大宽度// 绘制进度条canvas.beginPath();var fillcolor = that.getfillclolr(this.population);var rgb = `rgba(${fillcolor.r},${fillcolor.g},${fillcolor.b},1)`;canvas.rect(30,42,28,5);canvas.fillStyle = 'blue'; //"rgba(255,255,255,0.6)"; //fillcolor + "88";canvas.fill();  // 路径填充方法canvas.closePath();// 绘制当前在线占比var activeWidth = this.population*28/90;canvas.beginPath();canvas.rect(30,42,activeWidth,5);canvas.fillStyle = 'red';canvas.fill();  // 路径填充方法canvas.closePath();}if (cartFlag) {// 车的图形canvas.beginPath();canvas.rect(60, 0, 60, 60);canvas.fillStyle = rgb;canvas.fill();canvas.closePath();// 车图片填充var imgCart = new Image();   // 创建一个<img>元素imgCart.onload = function(){canvas.drawImage(imgCart,60,10,30,40);}imgCart.src = "/assets/images/cart.png";// 当前在线车canvas.fillStyle = '#FF0000';canvas.textAlign = 'right';  //文本绘制时，指定文本的水平对齐方式canvas.textBaseline = 'center'; // 文本绘制时，指定文本对齐的基线canvas.font = '10px sans-serif';  // 在canvas文本绘制时的字号字体控制canvas.fillText(this.population, 100, 20, 20); // 用来填充文字，text:填充文本信息；x:起点横坐标；y:起点纵坐标，maxWidth:文本占据最大宽度// 绘制总数车canvas.fillStyle = 'blue';canvas.textAlign = 'right';  //文本绘制时，指定文本的水平对齐方式canvas.textBaseline = 'center'; // 文本绘制时，指定文本对齐的基线canvas.font = '10px sans-serif';  // 在canvas文本绘制时的字号字体控制canvas.fillText("/", 104, 25, 5); // 用来填充文字，text:填充文本信息；x:起点横坐标；y:起点纵坐标，maxWidth:文本占据最大宽度canvas.fillText(90, 114, 35, 15); // 用来填充文字，text:填充文本信息；x:起点横坐标；y:起点纵坐标，maxWidth:文本占据最大宽度// 绘制进度条canvas.beginPath();var fillcolor = that.getfillclolr(this.population);var rgb = `rgba(${fillcolor.r},${fillcolor.g},${fillcolor.b},1)`;canvas.rect(90,42,28,5);canvas.fillStyle = 'blue'; //"rgba(255,255,255,0.6)"; //fillcolor + "88";canvas.fill();  // 路径填充方法canvas.closePath();// 绘制当前在线占比var activeWidth = this.population*28/90;canvas.beginPath();canvas.rect(90,42,activeWidth,5);canvas.fillStyle = 'red';canvas.fill();  // 路径填充方法canvas.closePath();}

使用canvas画图形相关推荐

Android Canvas画图形（更新中）
一.Canvas的常用操作操作类型相关API 备注绘制基本形状 drawPoint, drawPoints, drawLine, drawLines, drawRect, drawRoundRe ...
微信小程序使用canvas画不规则图形
一.根据UI在海报中画不同的图片形状的路径,这中用css很简单,用canvas画的话就要了解canvas中的几个方法, 效果图: 代码如下: Page({canvasIdErrorCallback(e ...
HTML5 装饰Canvas中图形
装饰图形 Canvas为图形提供了一些默认样式,如线条.填充的默认颜色为黑色等.但是,这些默认样式无法满足所有用户的需求,也无法体现Canvas的灵活性,故Canvas为图形定义了一些属性,以便用户自 ...
如何用 canvas 画出分形图
前言分形是一门以非规则几何形态为研究对象的几何学,由曼德勃罗(B.B.Mandelbrot)等人创立并命名. 分形图从整体上看,是处处不规律的.但从局部观察,图形的规则性又是相同的,即具有自相似的 ...
Canvas画各种线
Canvas画各种线阅读数:562 在Canvas中绘制路径,最好加上beginPath()和closePath(). 结合lineTo()绘制不同的路径 closePath()方法创建从当前点到开 ...
网格画法：原生 Canvas 画网格，可拖动、可放大缩小、并带有坐标系 0 0 位置辅助线
原生 Canvas 画网格网格:一种可以在 canvas 面板上绘制图形的辅助线集合. 我们设定 canvas 初始化左上角顶点为 0,0 点,向右
canvas画奥运五环 2019/10/29
在HbuilderX中用canvas画一个奥运五环. 先用arc画出五个圆环,画布是后画的图形在顶层,再根据圆环相互串压的顺序,新添同心圆笔画,就能画出五环相互勾连的样子了. 基本完成任务,效果简陋, ...
【前端学习笔记—canvas标签和使用canvas画哆啦A梦案例】
目录 canvas 1. canvas是H5新增标签 2.使用canvas画出矩形 (1)第一步,要新建画布 (2)第二步,要创建一支画笔 (3)第三步,用canvas画出矩形 3. 如何使用canv ...
使用canvas画折线图和曲线图
使用canvas画折线图和曲线图贝塞尔曲线如果想要在p0=>p2的过程中经过p1,那么需要计算出pc的值,在canvas之中作为控制点二次贝塞尔曲线转换为三次上面只是简单介绍,具体的参考文 ...

使用canvas画图形

使用canvas画图形相关推荐

最新文章

热门文章