html5中使用canvas绘制两点弧线箭头

2023-03-02 15:17:02html-css08

html5中使用canvas绘制两点弧线箭头,第1张

回答完毕，采纳即可。

<!DOCTYPE HTML>

<html>

<head>

</style>

var Eye = function (a, b)

{

this.a = a

this.b = b

}

Eye.prototype =

{

constructor : Eye,

g : null,

init : function ()

{

var canvas = document.querySelector ("canvas")

this.g = canvas.getContext ("2d")

return this

drawEyelid : function ()

{

var g = this.g, a = this.a, b = this.b, R = 5

g.save ()

g.beginPath ()

g.fillStyle = "black"

g.arc (a.x, a.y, R, 0, 2 * Math.PI)

g.fill ()

g.restore ()

g.beginPath ()

g.fillStyle = "red"

g.arc (b.x, b.y, R, 0, 2 * Math.PI)

g.fill ()

g.restore ()

g.beginPath ()

g.strokeStyle = "blue"

g.moveTo (a.x, a.y)

g.lineTo (a.x, a.y)

var r = 300

g.arcTo (a.x + r, a.y, b.x, b.y, r)

g.lineTo (b.x, b.y)

g.stroke ()

g.restore ()

g.beginPath ()

g.strokeStyle = "pink"

g.moveTo (b.x, b.y)

g.lineTo (b.x, b.y)

g.arcTo (b.x - r, b.y, a.x, a.y, r)

g.lineTo (a.x, a.y)

g.stroke ()

g.restore ()

g.beginPath ()

g.fillStyle = "black"

g.moveTo (b.x, b.y)

g.lineTo (b.x, b.y - 2 * R)

g.lineTo (b.x - 2 * R, b.y - 4)

g.fill ()

g.restore ()

g.beginPath ()

g.moveTo (a.x, a.y)

g.lineTo (a.x, a.y + 2 * R)

g.lineTo (a.x + 2 * R, a.y + 4)

g.fill ()

g.restore ()

}

onload = function ()

{

var eye = new Eye (

{

x : 100,

y : 50

{

x : 550,

y : 310

})

eye.init ().drawEyelid ()

}

</script>

</head>

<body>

你的浏览器不支持canvas标签

</canvas>

</body>

</html>

下面是源码

主文件

test.htm

<!doctype html>

<html>

<head>

</head>

<body>

<p> :( 抱歉~ <br> 您的浏览器貌似不支持HTML5的标签"canvas"的说，试试更换成

Chrome,FireFox,IE9...</p>

</canvas>

window.onload=function(){

var canvas=document.getElementById("canvas"),

context=canvas.getContext('2d'),

mouse=utils.captureMouse(canvas),

arrow=new Arrow()

arrow.x=canvas.width/2

arrow.y=canvas.height/2

if (!window.requestAnimationFrame) {

window.requestAnimationFrame = (window.webkitRequestAnimationFrame ||

window.mozRequestAnimationFrame ||

window.oRequestAnimationFrame ||

window.msRequestAnimationFrame ||

function (callback) {

return window.setTimeout(callback, 1000/60)

})

}

(function drawFrame(){

window.requestAnimationFrame(drawFrame,canvas)

context.clearRect(0,0,canvas.width,canvas.height)

var dx=mouse.x-arrow.x

var dy=mouse.y-arrow.y

arrow.rotation=Math.atan2(dy,dx)

arrow.draw(context)

}())

}

</script>

</body>

</html>

var canvas=document.getElementById(“canvas”)

//即将变量 canvas 作为对 html5 canvas标签id为’canvas’ 的引用

context=canvas.getContext(‘2d’)

//获取canvas该对象后，可在其上进行图形绘制

window.requestAnimationFrame

为了便于JavaScript进行图形的重绘，各大浏览器厂商都提供了各自的API给开发者进行调用，由于各大厂商的对HTML5的支持不同，所以API没有统一，但使用厂商各自的API则在该API在对应浏览器上为最有效率的方式运行。代码中对

用户浏览器做判断，实例化能被成功引用的API接口。如果用户的浏览器没有提供该API,则使用JS的setTimeout。其特性类似于AS的 ENTER_FRAME 事件。

需要用到的2个JS文件

utils.js 可根据传入的对象判断，鼠标所在对象的相对于左上角的坐标值

unction utils(){}

utils.captureMouse=function(element){

var mouse={x:0,y:0}

element.addEventListener('mousemove',function(event){

var x,y

if(event.pageX || event.pageY){

x=event.pageX

y=event.pageY

}else{

x=event.clientX+document.body.scrollLeft+

document.documentElement.scrollLeft

y=event.clientY+document.body.scrollTop+

document.documentElement.scrollTop

}

x -= element.offsetLeft

y -= element.offsetTop

mouse.x=x

mouse.y=y

},false)

return mouse

}

计算mouse相对于容器的x,y坐标偏移，本质是判断鼠标在浏览器中的鼠标偏移，之后对浏览器中容器宽度和高度进行再次偏移。

arrow.js

绘制一个箭头的js

function Arrow(){ this.x=0 this.y=0 this.color="#ffff00" this.rotation=0}Arrow.prototype.draw=function(context){ context.save() context.translate(this.x,this.y) context.rotate(this.rotation) context.lineWidth=2 context.fillStyle=this.color context.beginPath() context.moveTo(-50,-25) context.lineTo(0,-25) context.lineTo(0,-50) context.lineTo(50,0) context.lineTo(0,50) context.lineTo(0,25) context.lineTo(-50,25) context.lineTo(-50,-25) context.closePath() context.stroke() context.restore() }

熟悉AS的Graphics 的coder一定很快能熟悉使用JS的绘图API

style.css

用到的样式表

body{

background-color:#bbb

}

#canvas{

background-color:#fff

}

区分canvas 内外的颜色。

在chrome下：

input::-webkit-outer-spin-button,