Question

我试图制作我的＆＃34; YellowTrack＆＃34; var move，我疯了，我无法实现它。我不知道为什么，但是＆＃34; y＆＃34;坐标不会更新，所以它不会移动。我已经尝试了很多案例但其中任何一个都可以解决运动问题任何人都可以帮助我吗？ PD：抱歉我的代码写错了

代码如下：

Function SetString(ByVal sText As String) As String
    Dim sGreater55$, sGreater19$
    Dim sTextCopy As String
    sTextCopy = Replace(Replace(sText, "/", " "), "_", " ")

    ' If text is greater than 55 characters, first lets capture the string after 55 characters (depending on where the SPACE character is)
    If Len(sText) > 55 Then
        If InStr(55, sText, " ") > 0 Then
            sGreater55 = Mid(sText, InStr(55, sTextCopy, " "))
        Else
            sGreater55 = Mid(sText, InStrRev(sTextCopy, " ", 55))
        End If
    End If

    ' If text is greater than 19 characters, lets build the string after 19 characters (depending on where the SPACE character is)
    If Len(sText) > 19 Then
        If InStr(19, sText, " ") > 0 Then
            sGreater19 = Mid(sText, InStr(19, sTextCopy, " "))
        Else
            sGreater19 = Mid(sText, InStrRev(sTextCopy, " ", 19))
        End If
        sGreater19 = Left(sGreater19, Len(sGreater19) - Len(sGreater55))
    End If

    ' Now lets build the complete string
    SetString = Left(sText, Len(sText) - (Len(sGreater19) + Len(sGreater55))) & vbLf & sGreater19 & vbLf & sGreater55

End Function

Answer 1

使用window.requestAnimationFrame可以很容易地在画布上制作动画。

＆＃13;

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			body {
				background-color: black;
			}
			
			canvas {
				position: absolute;
				margin: auto;
				left: 0;
				right: 0;
				border: solid 1px white;
				border-radius: 10px;
			}
		</style>
	</head>
	
	<body>
		<canvas id="canvas"></canvas>
		<script type="application/javascript">
		
		// Anonymous closure to sandbox my code
		void function() {
		
			// Tells the JS engine to use strict syntax rules
			// e.g. creating variables without var, let or const
			// creates an error in strict mode
			"use strict";
			
			var canvasWidth = 180;
			var canvasHeight = 160;
			var canvas = null;
			var ctx = null;
			var mouse = {x: 0.0, y: 0.0};
			var box = {x: 0.0, y: 0.0, width: 20, height: 20};
			var boxMoveSpeed = 25.0;
			
			// Called whenever the mouse moves 
			// (canvas.onmousemove can be used too)
			window.onmousemove = function(e) {
				if (canvas) {
					// Gets the canvas' offset from the top left of the screen
					var boundingRect = canvas.getBoundingClientRect();
					
					mouse.x = e.clientX - boundingRect.left;
					mouse.y = e.clientY - boundingRect.top;
				}
			}
			
			// Game loop
			function loop() {
				// Tick (Update game logic)
				box.x += (mouse.x - box.x - box.width * 0.5) / boxMoveSpeed;
				box.y += (mouse.y - box.y - box.height * 0.5) / boxMoveSpeed;
				
				// Render
				ctx.fillStyle = "#333333";
				ctx.fillRect(0,0,canvasWidth,canvasHeight);
				
				ctx.lineWidth = 3;
				ctx.strokeStyle = "black";
				ctx.fillStyle = "darkred";
				ctx.beginPath();
				ctx.rect(box.x,box.y,box.width,box.height);
				ctx.fill();
				ctx.stroke();
				
				// Handy function that loops this
				// function at 60Hz (60 fps) for me.
				requestAnimationFrame(loop);
			}
			
			// Called when the page finishes loading
			// I treat it like a 'main method' you see
			// in other languages
			window.onload = function() {
				canvas = document.getElementById("canvas");
				canvas.width = canvasWidth;
				canvas.height = canvasHeight;
				
				ctx = canvas.getContext("2d");
				
			loop();
			}
		
		}();
		
		</script>
	</body>
</html>

＆＃13;

用帆布制作动画广场

1 个答案: