关于利用canvas画带箭头的直线旋转

利用canvas在Vue项目中使用：

    <imgid="range_right"src=""style="position: absolute;left: 0px;bottom: 0px;width: 100%;z-index: 2;"/>

//图片上面箭头旋转直线GetArrow(eye_number) {var canvas = document.getElementById('canvas')var ctx = canvas.getContext('2d')var img = document.getElementById('arrow_right')var img2 = document.getElementById('range_left')canvas.width = 128canvas.height = 128var w = canvas.widthvar h = canvas.heightctx.clearRect(0, 0, w, h)angles = new Array(0, 30, 60, -90, -60, -30)index = eye_number - 1var urlData = this.DrawArrow(62, angles[index], true, 'green')var urlData = canvas.toDataURL('image/png')// img.src = urlDataimg.src = urlDataimg2.src = urlDatareturn urlData},GetMutiArrow(eye_number) {var canvas = document.getElementById('canvas')var ctx = canvas.getContext('2d')canvas.width = 600canvas.height = 400var w = canvas.widthvar h = canvas.heightctx.clearRect(0, 0, w, h)angles = new Array(0, 30, 60, -90, -60, -30)for (index = 0; index < 6; index++) {this.color = 'blue'if (eye_number == index + 1) {this.color = 'red'}this.DrawArrow(156, angles[index], false, this.color, 1)}var urlData = canvas.toDataURL('image/png')return urlData},DrawArrow(value, angle, circle, color = 'blue', linewidth = 4) {var canvas = document.getElementById('canvas')var ctx = canvas.getContext('2d')var img = document.getElementById('range_right')var img2 = document.getElementById('arrow_left')var w = canvas.widthvar h = canvas.heightctx.save() //保存当前画布ctx.translate(w / 2, h / 2) //重新映射画布上的 (0,0) 位置。也就是画布的平移ctx.rotate((angle * Math.PI) / 180) //画布的旋转ctx.strokeStyle = color //颜色ctx.lineWidth = linewidthvar centerX = 0var centerY = 0if (circle) {ctx.beginPath() //路径ctx.moveTo(centerX + value, centerX)ctx.arc(centerX,centerX,value,(0 * Math.PI) / 180, // 返回 1（0 度的余弦）(360 * Math.PI) / 180)ctx.stroke()}ctx.beginPath() //路径ctx.moveTo(centerX - value, centerY)ctx.lineTo(centerX + value, centerY)ctx.stroke()ctx.moveTo(centerX + value, centerY)ctx.lineTo(centerX + value - 30, centerY - 10)ctx.stroke()ctx.moveTo(centerX + value, centerY)ctx.lineTo(centerX + value - 30, centerY + 10)ctx.stroke()ctx.restore()var urlData = canvas.toDataURL('image/png')img.src = urlDataimg2.src = urlData},

关于利用canvas画带箭头的直线旋转相关推荐

html5画直线箭头,HTML5 canvas画带箭头的虚线
今天给大家讲解的是在HTML5 canvas画带箭头的虚线.关于Canvas 对象表示一个 HTML 画布元素 -.它没有自己的行为,但是定义了一个 API 支持脚本化客户端绘图操作. 本案例注意事项 ...
Android Canvas绘制带箭头的直线
先看下效果图: 下面我们直接看代码我自定义了一个View,代码如下: package com.davis.drawtrangle;import android.content.Context; im ...
【MFC】如何画带箭头的直线
[MFC]如何画带箭头的直线前言代码获得箭头坐标前言如何绘制带箭头的直线,说来也简单,只需要算出箭头左右两边的坐标,再使用LineTo()函数即可.话不多说上代码. 代码获得箭头坐标已知 ...
CAD里面怎么画带箭头的直线
转自:http://jingyan.baidu.com/article/9113f81b0192e72b3214c709.html?st=2&os=0&bd_page_type=1&a ...
关于google地图api3的离线和在线开发（画带箭头的直线，指定范围，搜索，计算距离）
最近因为开发的需要,要做一个离线的google地图.并且能够加载google地图的一些特效.例如:地图的标记,计算距离,获取标记的经纬度,画带有箭头的直线,获取指定范围的数据等等.在这里我总结了很多开 ...
MFC画带箭头的直线
构造一个函数,是在startPoint,endPoint间画一条带箭头的线段: void CTry1View::DrawLine(POINT startPoint, POINT endPoint) { ...
delphi 画带箭头的线
unit Unit1;interfaceusesWindows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms,Di ...
利用css画三角箭头图标
利用css画三角箭头图标方式单独设置正方形的两条相邻的边框,通过transform的rotate属性值旋转实现箭头图标(注意单位为deg) div {width: 50px;height: 50px ...
如何利用canvas画一个圆，并且填充颜色
如何利用canvas画一个圆,并且填充颜色(小白专用,大佬勿看) canvas基础相信在此之前,你对canvas已经有一定的了解了,接下来我将介绍,如何利用canvas画一个圆. 1.新建一个htm ...

关于利用canvas画带箭头的直线旋转

关于利用canvas画带箭头的直线旋转相关推荐

最新文章

热门文章