在 html5 Canvas 上移动物体
[英]Moving Objects on html5 Canvas
问题描述
I placed an text on html5 canvas object using fillText option, question is I need to move the text position or change the color of the text that is already rendered.
很快我需要知道如何操作 canvas 元素的特定子元素
5 个解决方案
解决方案1
12 已采纳 2011-06-01 13:17:57
就像 Tz 说的，所有的坚持都必须建立在自己身上。 但这绝不意味着很难做到。 我已经写了几个简短的教程，如果你能胜任这项任务，它们可以帮助你入门。
解决方案2
6 2014-02-27 05:08:22
这将在您的 canvas 上移动一个小圆圈
var can = document.getElementById('canvas'); can.height = 1000; can.width = 1300; var ctx = can.getContext('2d'); var x = 10, y = 100; ctx.fillStyle = "black"; ctx.fillRect(700, 100, 100, 100); function draw() { ctx.beginPath(); ctx.arc(x, y, 20, 0, 2 * Math.PI); ctx.fillStyle = 'rgba(250,0,0,0.4)'; ctx.fill(); x += 2; ctx.fillStyle = "rgba(34,45,23,0.4)"; ctx.fillRect(0, 0, can.width, can.height); requestAnimationFrame(draw); //ctx.clearRect(0,0,can.width,can.height); } draw();
<canvas id="canvas" style="background:rgba(34,45,23,0.4)"></canvas>
解决方案3
6 2011-06-01 09:39:40
我认为 canvas 后面没有 object model，因此您无法像“文本对象”一样访问“子对象”并对其进行更改。 您可以做的是用不同的颜色再次绘制文本，覆盖 canvas 的“像素”。 如果要移动文本，首先必须清除 canvas 或用背景/透明颜色重新绘制文本，以摆脱之前 position 中的文本。 然后就可以在新的position中画出文字了。
解决方案4
4 2011-06-01 13:55:08
希望允许为某人的项目做广告。
看看http://ocanvas.org/你可以在那里获得灵感。 它是 object 类似于 canvas 库。 允许您处理事件、制作动画等。
解决方案5
3 2013-10-01 14:07:50
我从未尝试过，但我认为这将是做到这一点的方法。
var canvas = document.getElementById("canvas"); //get the canvas dom object
var ctx = canvas.getContext("2d"); //get the context
var c = { //create an object to draw
x:0, //x value
y:0, //y value
r:5; //radius
}
var redraw = function(){ // this function redraws the c object every frame (FPS)
ctx.clearRect(0, 0, canvas.width, canvas.height); // clear the canvas
ctx.beginPath(); //start the path
ctx.arc(c.x, c.y, c.r, 0, Math.PI*2); //draw the circle
ctx.closePath(); //close the circle path
ctx.fill(); //fill the circle
requestAnimationFrame(redraw);//schedule this function to be run on the next frame
}
function move(){ // this function modifies the object
var decimal = Math.random() // this returns a float between 0.0 and 1.0
c.x = decimal * canvas.width; // mulitple the random decimal by the canvas width and height to get a random pixel in the canvas;
c.y = decimal * canvas.height;
}
redraw(); //start the animation
setInterval(move, 1000); // run the move function every second (1000 milliseconds)
这是一个小提琴。 http://jsfiddle.net/r4JPG/2/
如果您想要缓动和翻译，请相应地更改move方法。
解决方案6
0 2017-11-30 04:21:16
<html>
<head>
<title>Canvas Exam</title>
</head>
<body>
<canvas id="my_canvas" height="500" width="500" style="border:1px solid black">
</canvas>
<script>
var dom=document.getElementById("my_canvas");
var ctx=dom.getContext("2d");
var x1=setInterval(handler,1);
var x=50;
var y=50;
r=40;
function handler()
{
ctx.clearRect(0,0,500,500);
r1=(Math.PI/180)*0;
r2=(Math.PI/180)*360;
ctx.beginPath();
//x=x*Math.random();
x=x+2;
r=r+10*Math.random();
ctx.arc(x,y,r,r1,r2);
ctx.closePath();
ctx.fillStyle="blue";
ctx.fill();
ctx.stroke();
if(x>400)
{
x=50;
y=y+10;
}
r=40;
}
</script>
</body>
</html>
HTML5 Canvas-移动对象的最佳做法
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.