一.滚动的车轮

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>滚动的车轮</title><style>canvas{border: 1px solid black;}</style>
</head>
<body><canvas width="1100" height="600"></canvas>
</body>
</html>
<script>var canvas = document.querySelector("canvas");var ctx = canvas.getContext("2d");// 实例化对象imagevar image = new Image(); // 给image对象添加图片image.src = "./img/wheel.png";image.onload = function(){// 旋转的度数var deg = 0;// 位置var x = 200;// 定时器setInterval(function(){ctx.clearRect(0,0,canvas.width,canvas.height);deg += 0.03;x++;// 备份ctx.save();// 平移ctx.translate(x,300);// 旋转ctx.rotate(deg);// 核心代码：使用图片ctx.drawImage(image,-560 / 2, -560 / 2 );// 恢复ctx.restore();},10);}
</script>

二.效果图

篇章

上一篇：canvas教程15-变形

下一篇：canvas教程17-合成

canvas教程16-滚动的车轮相关推荐

canvas教程大纲
文章目录 canvas教程1-canvas的基本使用 canvas教程2-canvas的编程思想 canvas教程3-用面向对象思维来实现动画 canvas教程4-canvas的绘制功能 canvas ...
canvas教程17-合成
文章目录一.合成二.知识点总结三.图形解释 1.默认(source-over) 2.source-in(相交的部分) 3.source-out 4.source-atop 5.destinati ...
【canvas教程】实现画布拖动、定点缩放，支持手势与鼠标滚轮操作
效果展示: 实现原理: 1.求实现定点缩放所需的位移值定点缩放:从图中选取某点(参照物)为中心点进行缩放,缩放时无论图像怎么变化,该点位置始终固定不变. 有想深入了解实现原理的,不妨试着做一下我下面 ...
fullPage教程 -- 整屏滚动效果插件 fullpage详解
为什么80%的码农都做不了架构师?>>> 本文为 H5EDU 机构官方 HTML5培训教程,主要介绍:fullPage教程 -- 整屏滚动效果插件 fullpage详解 1. ...
node-webkit教程(16)调试typescript
原文链接:node-webkit教程(16)调试typescript 本文所讲的内容同样适用于chrome浏览器. 在chrome的开发人员工具的配置项中,有一个sourcemap的选项,用来配置ja ...
iOS Sprite Kit教程之滚动场景
iOS Sprite Kit教程之滚动场景滚动场景在很多的游戏中,场景都不是静止的,而是滚动的,如在植物大战僵尸的游戏中,它的场景如图2.26所示. 图2.26 植物大战僵尸在图2.26中,用 ...
STM32 电机教程 16 - PMSM电机磁场定向控制原理
前言磁场定向控制又称矢量控制(FOC), 本质上为控制定子电流的幅度和相位,使之产生的磁场和转子的磁场正交,以产生最大的扭矩. 1. PMSM 的磁场定向控制磁场定向控制( Field Orien ...
STM32 进阶教程 16 - ADC1与ADC2同步采样
前言 STM32中在有2个或以上ADC模块的产品中,可以使用双ADC模式.在双ADC模式里,根据ADC1_CR1寄存器中DUALMOD[2:0]位所选的模式,转换的启动可以是ADC1主和ADC2从的交 ...
OD使用教程16 - 调试篇16
OD使用教程16 - 调试篇16 让编程改变世界 Change the world by program 本讲基于第十五讲进行补充,对第十七讲起到铺垫! [buy] 获得所有教学视频.课件.源代码等资 ...

canvas教程16-滚动的车轮

文章目录

一.滚动的车轮

二.效果图

篇章

canvas教程16-滚动的车轮相关推荐

最新文章

热门文章