Javascript 如何使我的绘图在HTML5画布中移动？
我有一个HTML5画布和Javascript。我怎样才能让它像手臂和脚一样移动 我试着在谷歌上搜索一些教程，但失败了 附件是我的图片和代码：Javascript 如何使我的绘图在HTML5画布中移动？,javascript,html,canvas,Javascript,Html,Canvas,我有一个HTML5画布和Javascript。我怎样才能让它像手臂和脚一样移动 我试着在谷歌上搜索一些教程，但失败了 附件是我的图片和代码： <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="canvascss.css"> </head> <body> <div> <canvas id=
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="canvascss.css">
</head>
<body>
<div>
<canvas id="canvas" width="400px" height="300px" >
Your browser does not support HTML5 Canvas element
</canvas>
</div>
<script>
var canvas = document.getElementById("canvas");
if (canvas.getContext("2d")) { // Check HTML5 canvas support
context = canvas.getContext("2d"); // get Canvas Context object
context.beginPath();
context.fillStyle = "black"; // #ffe4c4
context.arc(200, 50, 30, 0, Math.PI * 2, true); // draw circle for head
context.fill();
context.beginPath();
context.strokeStyle = "black"; // color
context.lineWidth = 3;
context.arc(200, 50, 20, 0, Math.PI, false); // draw semicircle for smiling
context.stroke();
// eyes
context.beginPath();
context.fillStyle = "black"; // color
context.arc(190, 45, 3, 0, Math.PI * 2, true); // draw left eye
context.fill();
context.arc(210, 45, 3, 0, Math.PI * 2, true); // draw right eye
context.fill();
// body
context.beginPath();
context.moveTo(200, 80);
context.lineTo(200, 180);
context.strokeStyle = "black";
context.stroke();
// arms
context.beginPath();
context.strokeStyle = "black"; // blue
context.moveTo(200, 80);
context.lineTo(150, 130);
context.moveTo(200, 80);
context.lineTo(250, 130);
context.stroke();
// legs
context.beginPath();
context.strokeStyle = "black";
context.moveTo(200, 180);
context.lineTo(150, 280);
context.moveTo(200, 180);
context.lineTo(250, 280);
context.stroke();
}
</script>
</body>
</html>
您的浏览器不支持HTML5画布元素
var canvas=document.getElementById（“canvas”）；
if（canvas.getContext（“2d”）{//检查HTML5画布支持
context=canvas.getContext（“2d”）；//获取画布上下文对象
context.beginPath（）；
context.fillStyle=“黑色”/#ffe4c4
context.arc（200,50,30,0，Math.PI*2，true）；//为头部绘制圆
context.fill（）；
context.beginPath（）；
context.strokeStyle=“黑色”；//颜色
context.lineWidth=3；
弧（200,50,20,0，Math.PI，false）；//画半圆形表示微笑
stroke（）；
//眼睛
context.beginPath（）；
context.fillStyle=“black”；//颜色
context.arc（190,45,3,0，Math.PI*2，true）；//画左眼
context.fill（）；
弧（210,45,3,0，Math.PI*2，true）；//画右眼
context.fill（）；
//身体
context.beginPath（）；
上下文。moveTo（200,80）；
lineTo（200180）；
context.strokeStyle=“黑色”；
stroke（）；
//武器
context.beginPath（）；
context.strokeStyle=“黑色”；//蓝色
上下文。moveTo（200,80）；
lineTo（150130）；
上下文。moveTo（200,80）；
lineTo（250130）；
stroke（）；
//腿
context.beginPath（）；
context.strokeStyle=“黑色”；
上下文。moveTo（200180）；
lineTo（150280）；
上下文。moveTo（200180）；
lineTo（250280）；
stroke（）；
}
requestAnimationFrame
setInterval