10
A
回答
12
就像Tz說的那樣,你必須在自己身上建立所有的持久性。但這決不意味着難以做到。我已經寫了一對夫婦短片tutorials,如果你要完成這項任務,這將使你開始。
5
我認爲這是畫布後面沒有對象模型,所以你不能訪問「子對象」就像一個「文本對象」改變。 你可以做的是用不同的顏色重寫文本,覆蓋畫布的「像素」。 如果要移動文本,首先必須清除畫布或使用背景/透明顏色重新繪製文本以擺脫先前位置中的文本。然後,您可以在新位置繪製文字。
4
希望允許廣告某人的項目。
看看http://ocanvas.org/你可以在那裏獲得靈感。 像畫布庫那樣的對象。允許你處理事件,製作動畫等。
3
我從來沒有嘗試過,但我認爲這將是實現它的方式。
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
方法。
3
這將移動一個小圓圈在畫布
<html>
<head>
</head>
<body>
<canvas id="canvas" style="background:rgba(34,45,23,0.4)"></canvas>
<script>
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();
</script>
</body>
</html>
查看示例here!
+1
這是上面的JSFiddle,以防其他人想要它:http://jsfiddle.net/4fWt5/ – 2014-03-27 14:56:11
0
<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>
相關問題
- 1. HTML5畫布距離和移動對象
- 2. 在畫布上移動對象
- 3. 在html5畫布上移動圈圈
- 4. html5畫布 - 按路徑動畫對象
- 5. 用戶輸入在HTML5畫布中移動對象
- 6. 在HTML5畫布中沿着路徑旋轉移動的對象
- 7. 在HTML5畫布中移動一些對象
- 8. HTML5畫布上移動TiledMap類背景
- 9. 移動HTML5畫布元素
- 10. 訪問html5畫布對象
- 11. HTML5畫布對象事件
- 12. 在畫布中移動對象
- 13. 如何在畫布上製作HTML5可拖動對象?
- 14. 在html5 webgl畫布動畫中組織對象three.js
- 15. 動畫GIF在HTML5畫布
- 16. 對HTML5畫布
- 17. 在JavaScript中使對象在畫布上移動
- 18. Html5畫布動畫
- 19. 畫布移動圈中的對象
- 20. 畫布圖像對象與style.left移動
- 21. 在HTML5畫布上爲兩個對象之間的路徑設置動畫
- 22. 使用文本框輸入在畫布上移動對象
- 23. 需要幫助在畫布上移動兩個對象
- 24. SkiaSharp - 如何在畫布上移動對象
- 25. 同時在Tkinter畫布上移動多個對象
- 26. HTML5畫布在同一個畫布內分層對象
- 27. 動態HTML5畫布動畫
- 28. HTML5畫布:如何動畫上下文?
- 29. 動畫對象的畫布
- 30. HTML5畫布圖像移動閃爍
@基山是不是你應該給+1的唯一原因?你有沒有給過一個不太好的答案+1?哈。 AIGF – DutGRIFF 2015-05-17 13:54:06
Canvas是否沒有在其上繪製「對象」的內部矢量狀態?它僅僅是一個像素的「斑點」? – 2015-12-04 13:46:46
這是正確的。這只是一個位圖,不知道如何繪製任何東西,除非您自己錄製它。 – 2015-12-04 18:21:16