下面是源码
主文件
testhtm
<!doctype html>
<html>
<head>
<mata charset="utf-8">
<title></title>
<link rel="stylesheet" href="stylecss">
</head>
<body>
<canvas id="canvas" width="400" height="400">
<p> :( 抱歉~ <br> 您的浏览器貌似不支持HTML5的标签"canvas"的说，试试更换成
Chrome,FireFox,IE9</p>
</canvas>
<script src="arrowjs"></script>
<script src="utilsjs"></script>
<script>
windowonload=function(){
var canvas=documentgetElementById("canvas"),
context=canvasgetContext('2d'),
mouse=utilscaptureMouse(canvas),
arrow=new Arrow();
arrowx=canvaswidth/2;
arrowy=canvasheight/2;
if (!windowrequestAnimationFrame) {
windowrequestAnimationFrame = (windowwebkitRequestAnimationFrame ||
windowmozRequestAnimationFrame ||
windowoRequestAnimationFrame ||
windowmsRequestAnimationFrame ||
function (callback) {
return windowsetTimeout(callback, 1000/60);
});
}
(function drawFrame(){
windowrequestAnimationFrame(drawFrame,canvas);
contextclearRect(0,0,canvaswidth,canvasheight);
var dx=mousex-arrowx;
var dy=mousey-arrowy;
arrowrotation=Mathatan2(dy,dx);
arrowdraw(context);
}());
};
</script>
</body>
</html>
var canvas=documentgetElementById(“canvas”)
//即将变量 canvas 作为对 html5 canvas标签id为’canvas’ 的引用
context=canvasgetContext(‘2d’)
//获取canvas该对象后，可在其上进行图形绘制
windowrequestAnimationFrame
为了便于JavaScript进行图形的重绘，各大浏览器厂商都提供了各自的API给开发者进行调用，由于各大厂商的对HTML5的支持不同，所以API没有统一，但使用厂商各自的API则在该API在对应浏览器上为最有效率的方式运行。代码中对
用户浏览器做判断，实例化能被成功引用的API接口。如果用户的浏览器没有提供该API,则使用JS的setTimeout。其特性类似于AS的 ENTER_FRAME 事件。
需要用到的2个JS文件
utilsjs 可根据传入的对象判断，鼠标所在对象的相对于左上角的坐标值
unction utils(){};utilscaptureMouse=function(element){
var mouse={x:0,y:0};
elementaddEventListener('mousemove',function(event){
var x,y;
if(eventpageX || eventpageY){
x=eventpageX;
y=eventpageY;
}else{
x=eventclientX+documentbodyscrollLeft+
documentdocumentElementscrollLeft;
y=eventclientY+documentbodyscrollTop+
documentdocumentElementscrollTop;
}
x -= elementoffsetLeft;
y -= elementoffsetTop;
mousex=x;
mousey=y;
},false);
return mouse;
};
计算mouse相对于容器的x,y坐标偏移，本质是判断鼠标在浏览器中的鼠标偏移，之后对浏览器中容器宽度和高度进行再次偏移。
arrowjs
绘制一个箭头的js
function Arrow(){ thisx=0; thisy=0; thiscolor="#ffff00"; thisrotation=0;}Arrowprototypedraw=function(context){ contextsave(); contexttranslate(thisx,thisy); contextrotate(thisrotation); contextlineWidth=2; contextfillStyle=thiscolor; contextbeginPath(); contextmoveTo(-50,-25); contextlineTo(0,-25); contextlineTo(0,-50); contextlineTo(50,0); contextlineTo(0,50); contextlineTo(0,25); contextlineTo(-50,25); contextlineTo(-50,-25); contextclosePath(); contextstroke(); contextrestore(); };
熟悉AS的Graphics 的coder一定很快能熟悉使用JS的绘图API
stylecss
用到的样式表
body{background-color:#bbb;
}
#canvas{
background-color:#fff;
}
区分canvas 内外的颜色。
当没有设置宽度和高度的时候，canvas 会初始化宽度为 300 像素和高度为 150 像素。该元素可以使用 CSS 来定义大小，但在绘制时图像会伸缩以适应它的框架尺寸：如果 CSS 的尺寸与初始画布的比例不一致，它会出现扭曲。
所以当我们给 canvas 设置宽高时需要注意，比例需要时 2:1
canvas html 属性和 css 属性
理论上 canvas 的 width 和 height 都只能是整数，但实际上可以设置小数，浏览器默认会进行取整 *** 作；也可以是带 px 的字符串，但是对于其它单位都会被忽略，渲染为 px；如果设置为负数或者不设置，默认宽是 300，高是 150
为什么<canvas>元素默认尺寸是 300 150，而不是其他尺寸组合呢？这个是 CSS 规范中定义的，作为替换元素，默认的尺寸是 300 150，<canvas>元素就是替换元素，因此默认尺寸是 300 150。由于<svg>元素也是替换元素，因此，<svg>默认的尺寸也是 300 150。
如果没有设置宽高属性，获取是取到的值是默认值
CSS 的 width，height 属性权重要大于<canvas>元素的 width，height 属性权重。
<canvas>的等比例特性是强制的，会忽略 HTML 属性的设置。对比下面的测试 HTML：
最终的宽度表现不是 300 而是等比例缩放的 176px。
1：Canvas 默认的画布宽高是 300 150，当你设置标签的 width，height 属性值时，控制的是 Canvas 的元素本身的宽高，和 Canvas 画布的宽高大小。同时设置定了两个值。
2：而 Css 设置 width，height 时，只仅仅控制了 Canvas 元素自身的宽高，而不会改变 Canvas 画布大小。
而我们最终展示在页面上的内容是 canvas 画布的内容，然后缩放到 css 值大小
比如我们设置了 css
此时 canvas 元素的大小是 600px 300px ；但是画布大小还是 300px 150px
所以还是会先在 300px 150px 上的画布上先绘制，然后在拉伸绘画后的内容到我们 css 大小
此时我们获取 canvas 对象的 width 和 height 依旧还是 300px 150px (而我们绘制图案是也是基于画布大小来说的默认画布的左上角是 0，0)
当我们使用各个 Canvas API 进行图形图像绘制的时候，其坐标位置，尺寸大小等都是相对于<canvas>元素的 HTML 属性 width/height，与 CSS width/height 没有任何关系。
<canvas>元素本质上是个位图，因此，在 retina 高密度屏幕下，如果如果绘制图像，则如果按照视觉尺寸来绘制，可能就会模糊，我们可以将<canvas>元素的尺寸用 HTML 高宽属性设置为 2 倍尺寸，然后使用 CSS 高宽属性设置视觉尺寸为布局需要的尺寸大小。
以上就是关于怎么用html5的canvas实现箭头随着鼠标移动和旋转全部的内容，包括:怎么用html5的canvas实现箭头随着鼠标移动和旋转、canvas元素html属性的width&height与css样式的width&height关系、等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）