如何使用画布和javascript使绘图移动
How to make drawing move using canvas and javascript?
我创建了一个条形图,每次按下右箭头键时都要设置动画。我知道我不能真正移动物体,但我可以擦除并不断重新绘制图像。然而,我的实施可能还有很长的路要走。任何帮助都将不胜感激。
$(document).ready(function(e){
var canvas = document.getElementById("drawCanvas"),
context = canvas.getContext('2d'),
width = canvas.width,
height = canvas.height,
head = new Array(200, 200, 10,0, 2*Math.PI) ,
body = new Array(195, 210, 178, 250) ,
leftArm = new Array(192,215,200,230,210,230),
rightArm = new Array(192,215,178 ,222,178,230),
leftLeg = new Array(178, 250,190,260,185,275,192, 275 ),
rightLeg= new Array(178, 250, 168, 260, 155, 262,153, 268 ) ;
// board for game
function board(){
context.fillStyle="#FFF";
context.fillStyle="#FFF";
context.fill();
context.strokeStyle="#000";
context.strokeRect(0,0,width,height);
}
//costume #1
function costume1(){
context.beginPath();
//head
context.arc(head[0], head[1], head[2],head[3], head[4]);
//body
context.moveTo(body[0],body[1]);
context.lineTo(body[2],body[3]);
//right arm
context.moveTo(rightArm[0],rightArm[1]);
context.lineTo(rightArm[2] ,rightArm[3]);
context.lineTo(rightArm[4], rightArm[5]);
//left arm
context.moveTo(leftArm[0], leftArm[1]);
context.lineTo(leftArm[2], leftArm[3]);
context.lineTo(leftArm[4], leftArm[5]);
//left leg
context.moveTo(leftLeg[0], leftLeg[1]);
context.lineTo(leftLeg[2],leftLeg[3]);
context.lineTo(leftLeg[4] , leftLeg[5]);
context.lineTo(leftLeg[6], leftLeg[7]);
//right leg
context.moveTo(rightLeg[0], rightLeg[1]);
context.lineTo(rightLeg[2], rightLeg[3]);
context.lineTo(rightLeg[4], rightLeg[5]);
context.lineTo(rightLeg[6], rightLeg[7]);
context.stroke();
}
//costume #2
function costume2(){
context.arc(head[0], head[1], head[2],head[3], head[4]);
//body
context.moveTo(body[0],body[1]);
context.lineTo(body[2],body[3]);
//right arm
context.moveTo(rightArm[0],rightArm[1]);
context.lineTo(rightArm[2] + 5 ,rightArm[3]);
context.lineTo(rightArm[4] + 5 , rightArm[5]);
//left arm
context.moveTo(leftArm[0] , leftArm[1] );
context.lineTo(leftArm[2] - 5 , leftArm[3] );
context.lineTo(leftArm[4] - 10, leftArm[5] );
//left leg
context.moveTo(leftLeg[0] , leftLeg[1]);
context.lineTo(leftLeg[2] - 10 ,leftLeg[3]);
context.lineTo(leftLeg[4] - 20, leftLeg[5]);
context.lineTo(leftLeg[6] - 20, leftLeg[7]);
//right leg
context.moveTo(rightLeg[0], rightLeg[1]);
context.lineTo(rightLeg[2] + 15 , rightLeg[3] );
context.lineTo(rightLeg[4] + 30 , rightLeg[5]);
context.lineTo(rightLeg[6] +10, rightLeg[7]);
context.stroke();
}
function clear(){
context.clearRect(0,0, canvas.width, canvas.height);
}
var handle = true;
board();
///move Character
function check(e) {
var code = e.keyCode;
//Up arrow pressed
if (code == 39 && handle == true) {
clear();
board();
costume2();
handle = false;
}
else if(code == 39 && handle == false) {
clear();
board();
costume1();
handle = true;
}
}
window.addEventListener('keydown',check,false);
});
我建议您使用window.requestAnimationFrame()来重新绘制屏幕。这将为动画的每一帧递增地重新绘制屏幕。例如:
$(function(){
var context = document.getElementById('myCanvas').getContext('2d');
//initialize
window.requestAnimationFrame(draw);
function draw(){
context.clearRect(0,0,800,600); // clear canvas
// draw the current frame
// animate the next frame
window.requestAnimationFrame(draw);
}});
使用画布转换在画布上移动粘贴者。
特别是,context.translate(50,75)
会将你的stickman向右移动50像素,向下移动75像素,重要的是(!),你不必更改任何stickman坐标——画布完全为你处理。
变换也将帮助你清晰地表达你的坚持者的手臂、腿等。可以使用translate( rotationPointX, rotationPointY)
和rotate(angle)
的组合,以angle
围绕位于[rotationPointX, rotationPointY]
的关节旋转肢体。
移动粘贴者示例:
function drawStickman(changeInX,changeInY){
context.clearRect(0,0,canvas.width,canvas.height);
context.translate(changeInX,changeInY);
// draw your stickman -- no change in coordinates are needed
context.translate(-changeInX,-changeInY);
}
相关文章:
- Canvas Html5绘图应用程序,移动画布会导致重大问题
- 正在SharePoint 2013母版页中添加JQuery移动文件
- 如何在android中使用phonegap将文件从一个文件夹移动/复制到另一个文件夹
- 如何使用phaser使html5游戏在移动设备浏览器上运行
- FabricJs-限制主对象内添加对象的移动区域
- 如何从画布上的某个移动事件中获取X和Y
- 触摸移动时切换到新元素
- 每当您在选择器内移动鼠标时,悬停功能就会重复
- 停止jQuery UI滑块移动超过给定值
- 谷歌地图API v3不适用于移动浏览器或PhoneGap
- 如何将chrome扩展功能移植到移动设备(特别是jquery和trello)
- JQuery移动动态分区页面
- XMLHttpRequest在移动设备上的chrome上不起作用
- 如何使用画布和javascript使绘图移动
- 高图表:如果绘图线沿 xAxis 移动,则调整绘图带的大小
- 由谷歌地图绘制的矩形 绘图管理器不会触发鼠标移动事件
- javascript+html5画布:在移动设备上绘图而不是拖动/滚动
- 如何防止鼠标快速移动打断绘图应用程序中的线条
- 使用Canvas在鼠标上移动绘图,HMTL5
- 移动设备上的jQuery事件处理程序 - 模仿绘图操作