我在做一个HTML5小项目,请大神支招一下

发布网友 发布时间：2022-04-26 21:36

我来回答

共5个回答

热心网友 时间：2022-05-13 08:16

<script type="text/javascript">
var ocanvas = document.getElementById('canvas');
var cx = ocanvas.getContext('2d');
cx.strokeStyle='#990011';
cx.moveTo(100,100);
cx.lineTo(50,100);
cx.arc(100,100,10,0,2*Math.PI,false);
cx.stroke();
ocanvas.onmousemove=function(event) {
var x = event.offsetX - 100
var y = event.offsetY - 100
var len = Math.sqrt(x * x + y * y)
var scale = len / 50
var x = x / scale + 100
var y = y / scale + 100
cx.clearRect(0,0,200,200)
cx.beginPath()
cx.arc(100,100,10,0,2*Math.PI,false);
cx.moveTo(100,100);
cx.lineTo(x,y);
cx.stroke();
}
</script>

兄弟，加点悬赏

热心网友 时间：2022-05-13 09:34

画两个canvas重叠，动态的那个获取鼠标位置，每次重新划线，不弄连个canvas，每次还得重置画板

热心网友 时间：2022-05-13 11:08

HTML5支持SVG，可以直接用SVG画直线和圆，比起用Canvas做动画，要好得多，因为Canvas动画每次画完后都要更新显示。

热心网友 时间：2022-05-13 13:00

$(function(){
function clock(){
var now = new Date();
var sec = now.getSeconds();
var ctx = document.getElementById('canvas').getContext('2d');
ctx.save();
ctx.clearRect(0,0,200,200);
ctx.translate(100,100);
ctx.rotate(sec * Math.PI/30);
ctx.beginPath();
ctx.strokeStyle="#990011";
ctx.lineWidth=5;
ctx.moveTo(0,0);
ctx.lineTo(50,100);
ctx.stroke();
ctx.beginPath();
ctx.arc(0,0,10,0,2*Math.PI,false)
ctx.stroke();
ctx.restore();
window.requestAnimationFrame(clock);
}
window.requestAnimationFrame(clock);
})
你看一下是不是你想要的结果，一秒动一下，类似表

热心网友 时间：2022-05-13 15:08

这个网站有一些手机模板可以去看看网页链接