数码资讯
使用HTML5画布共享键盘和鼠标动画的示例
键盘控制球运动 我们都知道，我们看到动画实际上是一系列静态图像的快速切换，使视力的视觉效果是通过视觉残留产生的。之后，这是在画布上绘制的动画更容易。我们只需要将一些静态图，用另一个位置，这样我们可以按照一定的轨迹使静态图形移动，从而产生动画效果。 下面，我们在画布上画一个实心球，然后用键盘上的键控制
选购提示
关注价格、性能、续航、售后和真实使用场景，理性比较后再下单。
键盘控制球运动
我们都知道，我们看到动画实际上是一系列静态图像的快速切换，使视力的视觉效果是通过视觉残留产生的。之后，这是在画布上绘制的动画更容易。我们只需要将一些静态图，用另一个位置，这样我们可以按照一定的轨迹使静态图形移动，从而产生动画效果。
下面，我们在画布上画一个实心球，然后用键盘上的键控制球的运动产生动态效果：
Javaｓｃｒｉｐｔ代码将内容复制到剪贴板。
HTML5画布绘制移动小球的实例
您的浏览器不支持画布标记。
获取画布对象（画布）
VaR的画布document.getelementbyid（myCanvas）；
球说
函数球（x，y，半径，速度）{
这个x = x 10 | |； / / X坐标范围，默认是10
这个y = y 10 | |； / / Y坐标范围，默认是10
this.radius =半径| | 10； / /球半径，默认是10
this.speed =速度| | 5； / /球的运动速度，默认是5
移动
this.moveup =函数（）{
这this.speed Y =；
如果（这个< < this >半径】{
防止边界之外
这this.radius Y =；
}
}；
向右移动
this.moveright =函数（）{
这this.speed x =；
VaR Maxx = canvas.width - this.radius；
如果（这个x > Maxx）{
防止右边界超出
这个X = Maxx；
}
}；
向左移动
this.moveleft =函数（）{
这this.speed x =；
如果（这个x <这个半径）{
防止左边界
这this.radius x =；
}
}；
向下移动
this.movedown =函数（）{
这this.speed Y =；
VaR maxy = canvas.height - this.radius；
如果（这。y > maxy）{
防止边界之外
这Y =糯；
}
}；
}
抽签{球}
功能drawball（球）{
如果（typeof CTX！=未定义）{
Ctx.beginPath（）；
Ctx.arc（球，X，Y，ball.radius球。，0，math.pi×2，假）；
Ctx.fill（）；
}
}
画布/空白画布
功能clearcanvas（）{
如果（typeof CTX！=未定义）{
ctx.clearrect（0, 0, 400，300）；
}
}
新球（）；
简单地测试当前浏览器是否支持画布对象，以避免某些浏览器的语法错误不支持HTML5。
如果（帆布。getContext）{
让 / /相应的canvasrenderingcontext2d对象（刷）
VaR CTX = canvas.getcontext（2D）；
DrawBall（球）；
}
回调处理函数 / / onkeydown事件
根据用户的键控制球的运动
功能moveball（事件）{
开关（事件。键码）{
案例37：左箭头
Ball.moveLeft（）；
打破；
案例38：在方向键上
Ball.moveUp（）；
打破；
案例39：右键
Ball.moveRight（）；
打破；
案例40：在方向键下
ball.movedown（）；
打破；
默认情况下：其他键操作不响应
返回；
}
（clearcanvas）； / /第一个空白画布
DrawBall（球）； / /创建新的球
}
请用支持HTML5的浏览器打开以下网页以查看实际效果（使用方向键移动）：
用帆布画一个可移动的球。
小丑的笑脸
您只需要知道几个API，然后使用所需的动画参数来生成对您的动作作出响应的有趣的Web动画。
第一步，画五感
小丑没有耳朵和眉毛，只剩下三个官员，但是小丑的两只眼睛分开画，所以总共有四个部分。
绘制左眼的代码
Javaｓｃｒｉｐｔ代码将内容复制到剪贴板。
VaR的眼睛=新的动力学。线（{
X：150，
点：{ 0, 200, 50，190, 100, 200，50, 210 }，
张力：0.5，
封闭的：真实的，
中风：白色，
StrokeWidth：10
}）；
绘制右眼代码
Javaｓｃｒｉｐｔ代码将内容复制到剪贴板。
VaR的右眼=新的动力学。线（{
X - SW - 250，
点：{ 0, 200, 50，190, 100, 200，50, 210 }，
张力：0.5，
封闭的：真实的，
中风：白色，
StrokeWidth：10
}）；
绘制鼻子的代码
Javaｓｃｒｉｐｔ代码将内容复制到剪贴板。
新的动能线（{
点：{ 240, 280，申银万国 / 2, 300，sw-240280 }，
张力：0.5，
封闭的：真实的，
中风：白色，
StrokeWidth：10
}）；
绘制嘴的代码
Javaｓｃｒｉｐｔ代码将内容复制到剪贴板。
var =新的动能线（{
点：{ 150, 340，SW 2, 380，SW - 150, 340，SW 2，SH }，
张力：0.5，
封闭的：真实的，
中风：'，
StrokeWidth：10
}）；
你不觉得很失望，所以它只是几行代码。是的，它是如此简单，我相信你可以成为一个网络游戏动画程序员开始有信心！
简单地解释上面的代码。动态是我们使用的js工具箱。在页面的头部，我们需要参考它：
Javaｓｃｒｉｐｔ代码将内容复制到剪贴板。
var =新的动能线（{
点：{ 150, 340，SW 2, 380，SW - 150, 340，SW 2，SH }，
张力：0.5，
封闭的：真实的，
中风：'，
StrokeWidth：10
}）；
其他几点是线弹性、颜色、宽度等，这些都很容易理解。
第二步，让图形移动
这个动画的吸引力在于它可以响应鼠标的动作和与用户的互动，这是一个成功的动画的关键。如果你仔细看，改变面部形状的小丑，大眼睛，大嘴巴，大鼻子，但这种变化不是突然的改变，但有一个过渡，一些算法，这是最令人担忧的。幸运的是，这个算法的技术非常成熟，不需要我们去思考。在这些动画引擎存储库中，这些技术被封装成一个非常简单和方便的界面。
左眼动画
Javaｓｃｒｉｐｔ代码将内容复制到剪贴板。
无功lefteyetween =新的动力学。吐温（{
结：眼睛，
持续时间：1，
宽松：Kinetic.Easings.ElasticEaseOut，
y - 100，
点：{ 0, 200, 50，150, 100, 200，50, 200 }
}）；
右眼动画
Javaｓｃｒｉｐｔ代码将内容复制到剪贴板。
无功righteyetween =新的动力学。吐温（{
结：右眼，
持续时间：1，
宽松：Kinetic.Easings.ElasticEaseOut，
y - 100，
点：{ 0, 200, 50，150, 100, 200，50, 200 }
}）；
鼻子的动画
Javaｓｃｒｉｐｔ代码将内容复制到剪贴板。
无功nosetween =新的动力学。吐温（{
节点：鼻子，
持续时间：1，
宽松：Kinetic.Easings.ElasticEaseOut，
y - 100，
点：{ 220, 280，申银万国 / 2, 200，sw-220280 }
}）；
口动画
Javaｓｃｒｉｐｔ代码将内容复制到剪贴板。
无功mouthtween =新的动力学。吐温（{
节点：口，
持续时间：1，
宽松：Kinetic.Easings.ElasticEaseOut，
点：{ 100, 250，申银万国 / 2, 250，西南100, 250，申银万国 / 2，sh-20 }
}）；
代码非常简单，变量的名称可以自我解释。有经验的程序员应该能够理解代码。基本代码是给你一些要点来指定动画动作的下降模式和持续时间。
完整的动画代码
Javaｓｃｒｉｐｔ代码将内容复制到剪贴板。
{体
保证金：0px；
填料：0px；
}
{ #容器
背景颜色：黑色；
}
var SW = 578；
var = 400；
var阶段=新的动力学阶段（{
容器：'container'，
宽度：578，
身高：400
}）；
var层=新的动能层（{
y - 30
}）；
VaR的眼睛=新的动力学。线（{
X：150，
点：{ 0, 200, 50，190, 100, 200，50, 210 }，
张力：0.5，
封闭的：真实的，
中风：白色，
StrokeWidth：10
}）；
VaR的右眼=新的动力学。线（{
X - SW - 250，
点：{ 0, 200, 50，190, 100, 200，50, 210 }，
张力：0.5，
封闭的：真实的，
中风：白色，
StrokeWidth：10
}）；
新的动能线（{
点：{ 240, 280，申银万国 / 2, 300，sw-240280 }，
张力：0.5，
封闭的：真实的，
中风：白色，
StrokeWidth：10
}）；
var =新的动能线（{
点：{ 150, 340，SW 2, 380，SW - 150, 340，SW 2，SH }，
张力：0.5，
封闭的：真实的，
中风：'，
StrokeWidth：10
}）；
Layer.add（眼睛）
添加（右眼）。
添加（鼻子）
添加（口）；
stage.add（层）；
/ /吐温
无功lefteyetween =新的动力学。吐温（{
结：眼睛，
持续时间：1，
宽松：Kinetic.Easings.ElasticEaseOut，
y - 100，
点：{ 0, 200, 50，150, 100, 200，50, 200 }
}）；
无功righteyetween =新的动力学。吐温（{
结：右眼，
持续时间：1，
宽松：Kinetic.Easings.ElasticEaseOut，
y - 100，
点：{ 0, 200, 50，150, 100, 200，50, 200 }
}）；
无功nosetween =新的动力学。吐温（{
节点：鼻子，
持续时间：1，
宽松：Kinetic.Easings.ElasticEaseOut，
y - 100，
点：{ 220, 280，申银万国 / 2, 200，sw-220280 }
}）；
无功mouthtween =新的动力学。吐温（{
节点：口，
持续时间：1，
宽松：Kinetic.Easings.ElasticEaseOut，
点：{ 100, 250，申银万国 / 2, 250，西南100, 250，申银万国 / 2，sh-20 }
}）；
Stage.getContainer（），AddEventListener（'mouseover功能（））{
LeftEyeTween.play（）；
RightEyeTween.play（）；
nosetween.play（）；
MouthTween.play（）；
}）；
Stage.getContainer（），AddEventListener（'mouseout功能（））{
LeftEyeTween.reverse（）；
righteyetween.reverse（）；
nosetween.reverse（）；
MouthTween.reverse（）；
}）；
观看演示
我们都知道，我们看到动画实际上是一系列静态图像的快速切换，使视力的视觉效果是通过视觉残留产生的。之后，这是在画布上绘制的动画更容易。我们只需要将一些静态图，用另一个位置，这样我们可以按照一定的轨迹使静态图形移动，从而产生动画效果。
下面，我们在画布上画一个实心球，然后用键盘上的键控制球的运动产生动态效果：
Javaｓｃｒｉｐｔ代码将内容复制到剪贴板。
HTML5画布绘制移动小球的实例
您的浏览器不支持画布标记。
获取画布对象（画布）
VaR的画布document.getelementbyid（myCanvas）；
球说
函数球（x，y，半径，速度）{
这个x = x 10 | |； / / X坐标范围，默认是10
这个y = y 10 | |； / / Y坐标范围，默认是10
this.radius =半径| | 10； / /球半径，默认是10
this.speed =速度| | 5； / /球的运动速度，默认是5
移动
this.moveup =函数（）{
这this.speed Y =；
如果（这个< < this >半径】{
防止边界之外
这this.radius Y =；
}
}；
向右移动
this.moveright =函数（）{
这this.speed x =；
VaR Maxx = canvas.width - this.radius；
如果（这个x > Maxx）{
防止右边界超出
这个X = Maxx；
}
}；
向左移动
this.moveleft =函数（）{
这this.speed x =；
如果（这个x <这个半径）{
防止左边界
这this.radius x =；
}
}；
向下移动
this.movedown =函数（）{
这this.speed Y =；
VaR maxy = canvas.height - this.radius；
如果（这。y > maxy）{
防止边界之外
这Y =糯；
}
}；
}
抽签{球}
功能drawball（球）{
如果（typeof CTX！=未定义）{
Ctx.beginPath（）；
Ctx.arc（球，X，Y，ball.radius球。，0，math.pi×2，假）；
Ctx.fill（）；
}
}
画布/空白画布
功能clearcanvas（）{
如果（typeof CTX！=未定义）{
ctx.clearrect（0, 0, 400，300）；
}
}
新球（）；
简单地测试当前浏览器是否支持画布对象，以避免某些浏览器的语法错误不支持HTML5。
如果（帆布。getContext）{
让 / /相应的canvasrenderingcontext2d对象（刷）
VaR CTX = canvas.getcontext（2D）；
DrawBall（球）；
}
回调处理函数 / / onkeydown事件
根据用户的键控制球的运动
功能moveball（事件）{
开关（事件。键码）{
案例37：左箭头
Ball.moveLeft（）；
打破；
案例38：在方向键上
Ball.moveUp（）；
打破；
案例39：右键
Ball.moveRight（）；
打破；
案例40：在方向键下
ball.movedown（）；
打破；
默认情况下：其他键操作不响应
返回；
}
（clearcanvas）； / /第一个空白画布
DrawBall（球）； / /创建新的球
}
请用支持HTML5的浏览器打开以下网页以查看实际效果（使用方向键移动）：
用帆布画一个可移动的球。
小丑的笑脸
您只需要知道几个API，然后使用所需的动画参数来生成对您的动作作出响应的有趣的Web动画。
第一步，画五感
小丑没有耳朵和眉毛，只剩下三个官员，但是小丑的两只眼睛分开画，所以总共有四个部分。
绘制左眼的代码
Javaｓｃｒｉｐｔ代码将内容复制到剪贴板。
VaR的眼睛=新的动力学。线（{
X：150，
点：{ 0, 200, 50，190, 100, 200，50, 210 }，
张力：0.5，
封闭的：真实的，
中风：白色，
StrokeWidth：10
}）；
绘制右眼代码
Javaｓｃｒｉｐｔ代码将内容复制到剪贴板。
VaR的右眼=新的动力学。线（{
X - SW - 250，
点：{ 0, 200, 50，190, 100, 200，50, 210 }，
张力：0.5，
封闭的：真实的，
中风：白色，
StrokeWidth：10
}）；
绘制鼻子的代码
Javaｓｃｒｉｐｔ代码将内容复制到剪贴板。
新的动能线（{
点：{ 240, 280，申银万国 / 2, 300，sw-240280 }，
张力：0.5，
封闭的：真实的，
中风：白色，
StrokeWidth：10
}）；
绘制嘴的代码
Javaｓｃｒｉｐｔ代码将内容复制到剪贴板。
var =新的动能线（{
点：{ 150, 340，SW 2, 380，SW - 150, 340，SW 2，SH }，
张力：0.5，
封闭的：真实的，
中风：'，
StrokeWidth：10
}）；
你不觉得很失望，所以它只是几行代码。是的，它是如此简单，我相信你可以成为一个网络游戏动画程序员开始有信心！
简单地解释上面的代码。动态是我们使用的js工具箱。在页面的头部，我们需要参考它：
Javaｓｃｒｉｐｔ代码将内容复制到剪贴板。
var =新的动能线（{
点：{ 150, 340，SW 2, 380，SW - 150, 340，SW 2，SH }，
张力：0.5，
封闭的：真实的，
中风：'，
StrokeWidth：10
}）；
其他几点是线弹性、颜色、宽度等，这些都很容易理解。
第二步，让图形移动
这个动画的吸引力在于它可以响应鼠标的动作和与用户的互动，这是一个成功的动画的关键。如果你仔细看，改变面部形状的小丑，大眼睛，大嘴巴，大鼻子，但这种变化不是突然的改变，但有一个过渡，一些算法，这是最令人担忧的。幸运的是，这个算法的技术非常成熟，不需要我们去思考。在这些动画引擎存储库中，这些技术被封装成一个非常简单和方便的界面。
左眼动画
Javaｓｃｒｉｐｔ代码将内容复制到剪贴板。
无功lefteyetween =新的动力学。吐温（{
结：眼睛，
持续时间：1，
宽松：Kinetic.Easings.ElasticEaseOut，
y - 100，
点：{ 0, 200, 50，150, 100, 200，50, 200 }
}）；
右眼动画
Javaｓｃｒｉｐｔ代码将内容复制到剪贴板。
无功righteyetween =新的动力学。吐温（{
结：右眼，
持续时间：1，
宽松：Kinetic.Easings.ElasticEaseOut，
y - 100，
点：{ 0, 200, 50，150, 100, 200，50, 200 }
}）；
鼻子的动画
Javaｓｃｒｉｐｔ代码将内容复制到剪贴板。
无功nosetween =新的动力学。吐温（{
节点：鼻子，
持续时间：1，
宽松：Kinetic.Easings.ElasticEaseOut，
y - 100，
点：{ 220, 280，申银万国 / 2, 200，sw-220280 }
}）；
口动画
Javaｓｃｒｉｐｔ代码将内容复制到剪贴板。
无功mouthtween =新的动力学。吐温（{
节点：口，
持续时间：1，
宽松：Kinetic.Easings.ElasticEaseOut，
点：{ 100, 250，申银万国 / 2, 250，西南100, 250，申银万国 / 2，sh-20 }
}）；
代码非常简单，变量的名称可以自我解释。有经验的程序员应该能够理解代码。基本代码是给你一些要点来指定动画动作的下降模式和持续时间。
完整的动画代码
Javaｓｃｒｉｐｔ代码将内容复制到剪贴板。
{体
保证金：0px；
填料：0px；
}
{ #容器
背景颜色：黑色；
}
var SW = 578；
var = 400；
var阶段=新的动力学阶段（{
容器：'container'，
宽度：578，
身高：400
}）；
var层=新的动能层（{
y - 30
}）；
VaR的眼睛=新的动力学。线（{
X：150，
点：{ 0, 200, 50，190, 100, 200，50, 210 }，
张力：0.5，
封闭的：真实的，
中风：白色，
StrokeWidth：10
}）；
VaR的右眼=新的动力学。线（{
X - SW - 250，
点：{ 0, 200, 50，190, 100, 200，50, 210 }，
张力：0.5，
封闭的：真实的，
中风：白色，
StrokeWidth：10
}）；
新的动能线（{
点：{ 240, 280，申银万国 / 2, 300，sw-240280 }，
张力：0.5，
封闭的：真实的，
中风：白色，
StrokeWidth：10
}）；
var =新的动能线（{
点：{ 150, 340，SW 2, 380，SW - 150, 340，SW 2，SH }，
张力：0.5，
封闭的：真实的，
中风：'，
StrokeWidth：10
}）；
Layer.add（眼睛）
添加（右眼）。
添加（鼻子）
添加（口）；
stage.add（层）；
/ /吐温
无功lefteyetween =新的动力学。吐温（{
结：眼睛，
持续时间：1，
宽松：Kinetic.Easings.ElasticEaseOut，
y - 100，
点：{ 0, 200, 50，150, 100, 200，50, 200 }
}）；
无功righteyetween =新的动力学。吐温（{
结：右眼，
持续时间：1，
宽松：Kinetic.Easings.ElasticEaseOut，
y - 100，
点：{ 0, 200, 50，150, 100, 200，50, 200 }
}）；
无功nosetween =新的动力学。吐温（{
节点：鼻子，
持续时间：1，
宽松：Kinetic.Easings.ElasticEaseOut，
y - 100，
点：{ 220, 280，申银万国 / 2, 200，sw-220280 }
}）；
无功mouthtween =新的动力学。吐温（{
节点：口，
持续时间：1，
宽松：Kinetic.Easings.ElasticEaseOut，
点：{ 100, 250，申银万国 / 2, 250，西南100, 250，申银万国 / 2，sh-20 }
}）；
Stage.getContainer（），AddEventListener（'mouseover功能（））{
LeftEyeTween.play（）；
RightEyeTween.play（）；
nosetween.play（）；
MouthTween.play（）；
}）；
Stage.getContainer（），AddEventListener（'mouseout功能（））{
LeftEyeTween.reverse（）；
righteyetween.reverse（）；
nosetween.reverse（）；
MouthTween.reverse（）；
}）；
观看演示
声明：本文内容用于数码产品信息整理与选购参考，具体价格、库存、售后政策以官方渠道和电商页面实时信息为准。