Canvas作图
程序员文章站
2022-04-04 20:37:43
什么是 Canvas? canvas 元素用于在网页上绘制图形。 ......
前几天项目GIS部分一个功能模块需要一个控制仪表盘,虽然之前看过canvas作图,但是没怎么具体用过。今天就这个功能模块研究了下canvas。
什么是 Canvas?
canvas 元素用于在网页上绘制图形。<canvas> 元素本身并没有绘制能力(它仅仅是图形的容器),必须使用脚本来完成实际的绘图任务,通常是用JavaScript在网页上绘制图像。canvas所在画布是一个矩形区域,我们可以控制画布的每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。一句话说完,功能很强大,需要研究的东西很多!
创建 Canvas 元素
在 HTML5 页面添加 canvas 元素。规定元素的 id、和宽高:
<body> <canvas id="canvas" width="400" height="400"></canvas> </body>
Canvas 对象表示一个 HTML 画布元素 - <canvas>。它没有自己的行为,但是定义了一个 很多API 支持脚本化客户端绘图操作。
Canvas 对象的属性
height 属性
画布的高度。和一幅图像一样,这个属性可以指定为一个整数像素值或者是窗口高度的百分比。当这个值改变的时候,在该画布上已经完成的任何绘图都会擦除掉。默认值是 300。
width 属性
画布的宽度。和一幅图像一样,这个属性可以指定为一个整数像素值或者是窗口宽度的百分比。当这个值改变的时候,在该画布上已经完成的任何绘图都会擦除掉。默认值是 300。
具体的实验代码如下,效果可直接执行代码测试:所有的注释都写在了代码里面,故不另行做注释
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <style type="text/css"> canvas { border: 1px solid red; background-color: #fff; cursor: pointer; } input { position: absolute; font-size: 20px; color: #f8b500; top: 18%; left: 9%; width: 100px; height: 30px; line-height: 28px; text-align: center; } </style> </head> <body> <body> <canvas id="canvas" width="400" height="400"></canvas> <input id="canvasText" value=""> <script> var canvasDrawing = { /**绘图对象初始化 * 参数:type 初始化类型。arc:圆弧形;bar :柱状图 */ init: function (type) { this.canvas = document.getElementById("canvas"); //获取用于canvas作图的对象 this.canvasEnv = this.canvas.getContext("2d"); //getContext()返回一个用于在画布上绘图的环境。当前唯一的合法参数值是 "2d",它指定了二维绘图。 this.pathr = 120; //滑动路径半径 if(type === "arc"){ this.event(); //事件绑定初始化 this.canvasDrawing.prototype = this; //canvasDrawing方法继承父元素内方法 this.ex = new this.canvasDrawing(type, 200, 200, 120); //初始化创建实例,默认画弧形图 }else { this.arr=[60, 90, 150, 130, 170, 190, 125, 175, 155, 165, 155, 145]; this.ex = new this.canvasDrawing(type, 70, 280, 330, 280); //初始化创建实例,根据type类型canvas作图;此处为柱状图 } }, /**事件绑定 */ event: function () { this.canvas.addEventListener("mousedown", this.onMouseDown.bind(this), false); this.canvas.addEventListener("mousemove", this.onMouseMove.bind(this), false); this.canvas.addEventListener("mouseup", this.onMouseUp.bind(this), false); }, /**绘制图形 * 参数:type绘图类型;x,y圆心位置;r内圆弧半径;j可变圆弧结束位置,bgc圆弧颜色 */ canvasDrawing: function (type, x, y, r, j, bgc) { if (type === "arc") { this.canvasEnv.clearRect(0, 0, 400, 400); this.x = x; this.y = y; this.r = r; this.j = j || 0.85 * Math.PI; this.canvasEnv.beginPath(); this.canvasEnv.lineWidth = 3; this.canvasEnv.arc(this.x, this.y, this.r + 15, Math.PI * 0.85, Math.PI * 0.15, false); // 绘制外层单弧线 this.canvasEnv.strokeStyle = '#f8b500'; this.canvasEnv.stroke(); this.canvasEnv.beginPath(); this.canvasEnv.arc(this.x, this.y, this.r, Math.PI * 0.85, this.j, false); // 可变条状圆弧 this.innerText = ((((this.j / Math.PI) - 0.85) * 100) / 1.3).toFixed(0); this.innerText = (this.innerText === "-0") ? (0) : (this.innerText); document.getElementById("canvasText").value = this.innerText; this.canvasEnv.strokeStyle = (bgc == undefined) ? (this.colorChoose(this.innerText)) : (bgc); this.canvasEnv.lineCap = "butt"; this.canvasEnv.lineWidth = 20; this.canvasEnv.stroke(); } else { //绘制柱状图 this.sX = x; this.sY = y; this.eX = r; this.eY = j; this.canvasEnv.beginPath(); this.canvasEnv.moveTo(this.sX, this.sY); this.canvasEnv.lineTo(this.eX, this.eY); this.canvasEnv.stroke(); for (var i = 0; i < 12; i++) { var width = 10; var height = this.arr[i]; var X = 85 + i * 20; var Y = 280 - height; this.canvasEnv.beginPath(); this.canvasEnv.fillStyle = "#900b09"; this.canvasEnv.rect(X, Y, width, height); //rect():创建矩形 this.canvasEnv.fill(); this.canvasEnv.closePath() } } }, /**确定按下鼠标位置 */ onMouseDown: function (event) { var X = this.getX(event); //获取鼠标左键按下所在的X坐标 var Y = this.getY(event); //获取鼠标左键按下所在的Y坐标 var minX = this.ex.x - 2 * this.ex.r, msXX = this.ex.x + 2 * this.ex.r; //鼠标按下横向区间 var minY = this.ex.y - 2 * this.ex.r, msXY = this.ex.y + 2 * this.ex.r; //鼠标按下纵向区间 if ((minX < X && X < msXX) && (minY < Y && Y < msXY)) { //判断鼠标是否在可允许区间 this.ex.isDown = true; } else { this.ex.isDown = false; } }, /**鼠标释放 */ onMouseUp: function () { this.ex.isDown = false }, /**鼠标移动 */ onMouseMove: function (event) { if (this.ex.isDown) { var coordinate = { "x": this.getX(event), "y": this.getY(event) }; var quadrantDoordinate = this.coordTransform(coordinate); if (this.check(quadrantDoordinate.x, quadrantDoordinate.y)) { var co = this.getMoveto(quadrantDoordinate.x, quadrantDoordinate.y); if (co == null) return; this.ex.canvasDrawing("arc", this.ex.x, this.ex.y, this.ex.r, co.z); } } }, /**canvas内坐标转换为圆形图内坐标 */ coordTransform: function (coordinates) { var target = new Object(); //象限按照数学顺时针划分 if (coordinates.x > this.ex.x && coordinates.y > this.ex.y) { //第一象限 target.x = -(this.ex.x - coordinates.x); target.y = this.ex.y - coordinates.y; } else if (coordinates.x > this.ex.x && coordinates.y < this.ex.y) { //第二象限 target.x = -(this.ex.x - coordinates.x); target.y = this.ex.y - coordinates.y; } else if (coordinates.x < this.ex.x && coordinates.y < this.ex.y) { //第三象限 target.x = -(this.ex.x - coordinates.x); target.y = this.ex.y - coordinates.y; } else if (coordinates.x < this.ex.x && coordinates.y > this.ex.y) { //第四象限 target.x = -(this.ex.x - coordinates.x); target.y = this.ex.y - coordinates.y; } return target; }, /**限制鼠标可拖动范围 */ check: function (x, y) { var xx = x * x; var yy = y * y; var minArea = (this.ex.x - this.ex.r) * (this.ex.x - this.ex.r); //可滑动最小区域 var msXArea = (this.ex.x - this.ex.r / 4) * (this.ex.x - this.ex.r / 4); //可滑动最大区域 if (xx + yy > minArea && xx + yy < msXArea) { return true; } else { return false; } }, getMoveto: function (x, y) { if (!this.ex.isDown) { return null; } var temp = new Object(); temp.o = Math.atan(y / x); //鼠标移动点圆形角 temp.x = this.pathr * Math.cos(temp.o); temp.y = this.pathr * Math.sin(temp.o); if (y < -60) { //坐标点处理;这里判断没处理好,坐标判定有些问题,鼠标滑动到-60上下,容易将最下面一段圆弧也画出来 return null; } if (x > 0) { //弧度值计算 temp.z = -Math.atan(temp.y / temp.x) + Math.PI * 2; } else { temp.z = -Math.atan(temp.y / temp.x) + Math.PI; } if (temp.z > 6.77) { //条状圆弧最大值(右下角位置) temp.z = 6.77; temp.x = this.pathr * Math.cos(Math.PI * 2.05); temp.y = -this.pathr * Math.sin(Math.PI * 2.05); } else if (temp.z < 2.67) { //条状圆弧最小值(左下角位置) temp.z = 2.67; temp.x = -this.pathr * Math.cos(Math.PI * 0.85); temp.y = -this.pathr * Math.sin(Math.PI * 0.85); } return temp; }, /**获取鼠标在canvas内坐标x */ getX: function (event) { return event.clientX - this.canvas.getBoundingClientRect().left; }, /**获取鼠标在canvas内坐标y */ getY: function (event) { return event.clientY - this.canvas.getBoundingClientRect().top; }, /**根据数值进行颜色的变换 */ colorChoose: function (val) { var color = null; var marginLeftSet = document.getElementById("canvasText"); if (val > 90) { color = "#FFD800"; } else if (val > 75) { color = "#BF9900"; } else if (val > 60) { color = "#997C00"; } else if (val > 45) { color = "#725B00"; } else if (val > 30) { color = "#4C3B00"; } else if (val > 15) { color = "#261D00"; } else { color = "#000000"; } if (val == 100) { marginLeftSet.style.marginLeft = "-10px"; } else if (val < 10) { marginLeftSet.style.marginLeft = "-30px"; } else { marginLeftSet.style.marginLeft = "-20px"; } return color; } }; canvasDrawing.init("arc"); /**给文本框绑定事件;同时回车更改圆弧形状 */ document.getElementById("canvasText").addEventListener("keydown", function (event) { var keyCode = window.event ? event.keyCode : event.which; var value = document.getElementById("canvasText").value; if (keyCode == 13 && (value != undefined && value != null)) { if (parseInt(value) <= 0) { value = 0; } else if (parseInt(value) >= 100) { value = 100; } canvasDrawing.canvasDrawing("arc", 200, 200, 120, ((1.3 * parseInt(value)) / 100 + 0.85) * Math.PI, canvasDrawing.colorChoose(value)); } }, false); </script> </body> </html>
效果图如下:(中间显示值表示当前弧形占比。值为0~100)