HTML5 Canvas旋转动画的2个代码例子(一个旋转的太极图效果)
canvas实现图片镜像翻转的2种方式
canvas实现图⽚镜像翻转的2种⽅式1. 通过canvas⾃带的画布⽅法进⾏翻转var img = new Image(); //这个就是 img标签的dom对象img.src = './sy.png';img.onload = function () {//图⽚加载完成后，执⾏此⽅法ctx.drawImage(img, posx, posy, 210, 80);};play.addEventListener('click', function () {ctx.clearRect(0, 0, canvas.width, canvas.height);//清除画布//位移来做镜像翻转ctx.translate(210+ posx * 2, 0);ctx.scale(-1, 1); //左右镜像翻转//ctx.translate(0, 160 + posy * 2);//ctx.scale(1, -1); //上下镜像翻转ctx.drawImage(img, 0, 0, 210, 80);});2.像素点的镜像翻转⽅法//竖向像素反转function imageDataVRevert(sourceData, newData) {for (var i = 0, h = sourceData.height; i < h; i++) {for (var j = 0, w = sourceData.width; j < w; j++) {newData.data[i * w * 4 + j * 4 + 0] =sourceData.data[(h - i) * w * 4 + j * 4 + 0];newData.data[i * w * 4 + j * 4 + 1] =sourceData.data[(h - i) * w * 4 + j * 4 + 1];newData.data[i * w * 4 + j * 4 + 2] =sourceData.data[(h - i) * w * 4 + j * 4 + 2];newData.data[i * w * 4 + j * 4 + 3] =sourceData.data[(h - i) * w * 4 + j * 4 + 3];}}return newData;}//横向像素反转function imageDataHRevert(sourceData, newData) {for (var i = 0, h = sourceData.height; i < h; i++) {for (j = 0, w = sourceData.width; j < w; j++) {newData.data[i * w * 4 + j * 4 + 0] =sourceData.data[i * w * 4 + (w - j) * 4 + 0];newData.data[i * w * 4 + j * 4 + 1] =sourceData.data[i * w * 4 + (w - j) * 4 + 1];newData.data[i * w * 4 + j * 4 + 2] =sourceData.data[i * w * 4 + (w - j) * 4 + 2];newData.data[i * w * 4 + j * 4 + 3] =sourceData.data[i * w * 4 + (w - j) * 4 + 3];}}return newData;}``var img = new Image(); //这个就是 img标签的dom对象img.src = './sy.png';img.onload = function () {//图⽚加载完成后，执⾏此⽅法ctx.drawImage(img, 0, 0, 210, 80);};//像素点操作var imgData = ctx.getImageData(0, 0, 210, 80);var newImgData = ctx.getImageData(0, 0, 210, 80);// var newImgData = ctx.getImageData(0, 0, w, h);ctx.putImageData(imageDataVRevert(newImgData, imgData), 0, 0); //上下翻转// ctx.putImageData(imageDataHRevert(newImgData, imgData), 0, 0);//左右翻转~~~~到此这篇关于canvas实现图⽚镜像翻转的2种⽅式的⽂章就介绍到这了,更多相关canvas图⽚镜像翻转内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章，希望⼤家以后多多⽀持！。
HTML5Canvas旋转风车绘制
HTML5Canvas旋转风车绘制写在前⾯：亲爱的朋友们⼤家好，鄙⼈⾃学前端，第⼀次写博客，写的不好的地⽅，烦请同学们谅解.okey！下图即是我们完成后的简单效果，⼼动不如⾏动，那么咱们就进⾏简单绘制吧！ 1、定义画布⾸先我们现在html⽂件⾥⾯插⼊<canvas>标签，定义画布的尺⼨，我这⾥定义画布的尺⼨为800*600像素。
同时在内部样式表⾥⾯设置canvas的背景⾊（⽅便画图时观看）；<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style type="text/css">body{padding: 0;margin: 0;}#canvas {background:#5151a2;}</style></head><body><canvas id="canvas" width="800" height="600"></canvas></body></html> 接下来的核⼼就是在原⽣JS环境下，绘制风车；通过JS DOM操作⽅法获取到canvas元素对象，并通过getContex（"2d"）获取2D绘图上下⽂，通过这个⽅法就像是要告诉浏览器“我们要在这个画布上绘制2d图形”；<script type="text/javascript">//获取画布的2d上下⽂var ctx = document.getElementById("canvas").getContext("2d");2、绘制风车底座风车的底座的⼏何图形看似就像⼀个细长细长的梯形，我们可以画出⼀个梯形出来，然后填充颜⾊，这⾥为了达到相对较好的效果，使⽤了颜⾊渐变填充的⽅法；okey！直接看代码吧~~！//定义⼀个函数，封装风车的底部基座function buttom(){ctx.beginPath(); //开始⼀条新的绘制路径var liner = ctx.createLinearGradient(390,600,410,600); //设置变量（颜⾊渐变的⽅向-起点-终点）liner.addColorStop(0,"#ccc"); //设置起点颜⾊liner.addColorStop(0.5,"#fff"); //设置中点颜⾊liner.addColorStop(1,"#ccc"); //设置终点颜⾊ctx.fillStyle = liner; //梯形的填充⽅式设置为变量（渐变颜⾊）ctx.moveTo(395,300); //提起我们的画笔，起点设置为（395,300）ctx.lineTo(405,300); //连接起点画线ctx.lineTo(410,600);ctx.lineTo(390,600);ctx.closePath(); //闭合路径ctx.fill(); //填充梯形} buttom(); //要调⽤函数，才能在浏览器显⽰我们来看⼀下页⾯中的效果，是不是很简单？（我感觉我话有点多哦~！~！）3、绘制叶⼦接下来的部分将是这个动画中最关键的地⽅，⾸先我们分析⼀下叶⼦的结构，三⽚叶⼦夹⾓为120°，⽽且每⽚叶⼦的形状是相同的；他们有⼀个圆⼼，你⼼中或许也有疑问，先画圆⼼还是先画叶⼦？叶⼦的形状应该怎么画呢？叶⼦可不可复制粘贴呢？答案当然是可以的，Let's do it！ 思路分析：1）、由于3⽚叶⼦的形状是⼀模⼀样，我们只需要画出⼀⽚叶⼦，第⼆第三⽚叶⼦直接copy就⾏了，聪明的我们是不是应该给这个叶⼦的画法封装⼀个函数呀？就叫它bind( )函数吧！！每次调⽤它就可以了！哎！你们TM太机智了2）、三⽚叶⼦有⼀个圆⼼，绘制叶⼦的时候为了⽅便取坐标值，我们将圆⼼从画图的左上⾓移动梯形顶部，这样我们绘制叶⼦会⽅便很多！这⾥使⽤了translate（）⽅法，移动坐标系！3）、最难的⼀点就是理解这⾥动画是怎么实现的，因为动画原理会影响到我们画叶⼦的⽂档结构：⾸先我们先新建⼀个绘图环境，我们称它为环境1，我们在环境1上画完第⼀⽚叶⼦；然后在第⼀个绘图环境前提下 旋转120°新建第⼀个绘图环境2，再此基础上调⽤画叶⼦的函数bind( )，绘制⼆⽚叶⼦;第三⽚叶⼦的绘制⽅法如法炮制，在环境2的基础上旋转120°，新建环境3，调⽤绘制叶⼦函数bind( )画第三⽚叶⼦;如果要实现动画，我们只需要旋转第⼀⽚叶⼦的绘图环境1，第⼆⽚叶⼦和第三⽚叶⼦都是参照环境1为基准画出来的，是不是也跟着动起来了呢？？弹幕：6666664）、最后就是⼀些基本的外观样式调试的啦！⽐如颜⾊渐变啊，透明度啊，之类的！绘制叶⼦画这个叶⼦形状的时候我是慢慢调试的，我的审美相当low，原谅我只能画出这样的叶⼦，当然想象⼒丰富的同学可以根据⾃⼰喜好来绘制，不过⼤体思路是⼀致的；这⾥我声明了⼀个变量 var num = 0;，作为环境1旋转度数变化的⼀个参数：那么咱就直接看代码吧var num =0;function yezi(){ctx.save(); //保存默认情况下的canvas变换状态ctx.beginPath();ctx.translate(400,300);// ctx.globalAlpha = 0.9;// 设置第⼀次状态下坐标系旋转度数ctx.rotate((Math.PI/180)*num);var liner1 = ctx.createLinearGradient(30,-12,30,12); //这⾥设置颜⾊渐变填充的样式liner1.addColorStop(0,"#ccc");liner1.addColorStop(0.5,"#fff");liner1.addColorStop(1,"#ccc");ctx.fillStyle = liner1;ctx.save(); //保存第⼀次状态平移坐标系变换ctx.beginPath();bind(); //调⽤函数//绘制第⼆⽚叶⼦ctx.beginPath();ctx.rotate((Math.PI/180)*120); //坐标系旋转120°ctx.save(); //保存旋转坐标系状态，为第三⽚叶⼦做铺垫bind(); //调⽤函数//绘制第三⽚叶⼦ctx.beginPath();ctx.rotate((Math.PI/180)*120); //坐标系旋转120°ctx.save();bind(); //调⽤函数ctx.restore(); //回复第3次状态前（旋转坐标系）ctx.restore(); //回复第2次状态前（旋转坐标系）//绘制叶⼦中⼼圆圈ctx.beginPath();var arcgradient = ctx.createRadialGradient(0,0,0,0,0,16);arcgradient.addColorStop(0,"#ccc");arcgradient.addColorStop(0.1,"#fff");arcgradient.addColorStop(1,"#ccc");ctx.arc(0,0,10,0,Math.PI*2);ctx.fillStyle = arcgradient;ctx.fill();ctx.restore(); //回复第1次状态前（平移坐标系）num+=5; //第⼀状下环境1 态坐标系旋转度数增加********************************这个num使得环境1的旋转⾓度在不停的变化，********************************************** ctx.restore();}//绘制每⽚叶⼦都重复的代码，这⾥做⼀个函数包装function bind(){ctx.moveTo(0,0);ctx.quadraticCurveTo(10,-12,30,-12); //⽐赛尔曲线ctx.lineTo(190,-3);ctx.quadraticCurveTo(200,0,190,3); ctx.lineTo(30,12);ctx.moveTo(0,0);ctx.quadraticCurveTo(10,12,30,12);ctx.fill();}4、设置动画动画这部分就⽐较简单了，设置定时器，清除画布，调⽤函数；⼤功告成，打完收⼯setInterval(function(){ctx.clearRect(0,0,800,600); //每次执⾏代码前，都要将画布清空，不然画出的图形会滞留在画布上； buttom(); //调⽤函数 yezi();},50);以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。
网页中基于HTML5 canvas的动画实现
设计制作数码世界 P .135网页中基于HTML5 canvas 的动画实现龚丽 武汉软件工程职业学院摘要：canvas 是HTML5新增的一个非常重要的元素，通过这个元素，我们可以在网页上创建画布，并在画布上绘制任意图形或图像。
canvas 还有一个特性就是可以在其内部创建动画，通过设置时间循环，让图形或图像动起来。
关键词：HTML5 canvas 元素 绘制图形 drawImage() setInterval()引言对于HTML4来说，在网页中绘制图形或运行动画，其能力是非常有限的。
HTML5则提供了本地绘图API，开发人员可以通过HTML5的canvas 元素并使用javascript 绘制形状、图形，实现在web 页面上创建动画，甚至游戏，而这些并不需要使用其他语言（例如SVG）或依赖外部插件（如Flash）。
当我们在页面上放置一个canvas 元素，就相当于在页面上创建了一个矩形绘图区。
canvas 元素自身并没有绘图能力，所有图形绘制及动画都是通过javascript 语言编程来实现，HTML5为图形绘制提供了一系列2D 绘图API。
1 基本图形绘制在网页中绘制基本图形，需要经过以下3个步骤：(1) 在HTML 页面文档中放置一个canvas 元素，相当于创建了一个矩形绘图区域，并设置canvas 元素的id。
(2) 使用javascript 编写绘图脚本，通过id 找到canvas 元素，并获取该元素的上下文环境对象，一般将环境对象设为二维，即把字符串“2d”传入getContent()方法中。
(3) 通过绘图API 在页面中绘制各种图形。
下面我们举例来看矩形、圆形的绘制编程。
首先，在HTML 文档中放置<canvas>元素，<canvas>元素本身是不包含宽度、高度及内容，也不会在屏幕上有任何显示，所以大部分情况下在创建时注明宽度及高度，并设置id。
在浏览器运行结果如下图1。
JavaScriptcanvas实现围绕旋转动画
JavaScriptcanvas实现围绕旋转动画使⽤canvas的convas来实现围绕旋转动画，外圈顺时针，⾥层逆时针代码demo链接地址：html⽂件<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title></title><style>body {margin: 0;padding: 0;overflow: hidden;background-color: #f0f0f0;}</style><script src="js/konva.js"></script><script src="js/circle.js"></script></head><body><div id="cas"></div><script>var width = window.innerWidth;var height = window.innerHeight;//创建舞台var stage = new Konva.Stage({container: "cas",width: width,height: height});//创建层var layer = new yer();//创建组1var group = new Konva.Group({x: stage.width() / 2,y: stage.height() / 2,});//最外层圆var circle1 = new Konva.Circle({x: 0,y: 0,radius: 250,stroke: "#ccc",strokeWidth: 1,dash: [6, 3]});group.add(circle1);//第⼆个圆var circle2 = new Konva.Circle({x: 0,y: 0,radius: 150,stroke: "#ccc",strokeWidth: 1,dash: [6, 3]});group.add(circle2);//第三个圆var circle3 = new Konva.Circle({x: 0,y: 0,radius: 135,stroke: "blue",strokeWidth: 2,dash: [10, 5]});group.add(circle3);//第四个圆var circle4 = new Konva.Circle({x: 0,y: 0,radius: 105,fill: "#ccc",opacity: 0.4});group.add(circle4);//第五个圆var circle5 = new Konva.Circle({x: 0,y: 0,radius: 80,fill: "#74A2F0"});group.add(circle5);//添加⽂字var text = new Konva.Text({x: -80,y: -12,text: "WEB全栈",fill: "white",fontSize: 24,width: 160,align: "center"});group.add(text);layer.add(group);//*****************************************************//创建组2var outGroup = new Konva.Group({x: stage.width() / 2,y: stage.height() / 2,});var arrColor = ["red", "green", "blue", "orange", "purple"]; var arrText = ["web", "node.js", "ajax", "html5", "css"];for(var i = 0; i < 5; i++) {var cir = new Circle({x : 250 * Math.cos(72 * i * Math.PI / 180), //圆⼼x轴的坐标 y : 250 * Math.sin(72 * i * Math.PI / 180), //圆⼼y轴的坐标 outR : 60, //外圆的半径inR : 50, //内圆的半径fill : arrColor[i], //填充颜⾊text: arrText[i], //⽂字outOpacity : 0.3, //外圆的透明度inOpacity : 0.6 //内圆的透明度});cir.drawCircle(outGroup);}layer.add(outGroup);//***********************************************//创建组3var inGroup = new Konva.Group({x: stage.width() / 2,y: stage.height() / 2,});var arrColor = ["red", "green", "blue", "orange", "purple"]; var arrText = ["web", "node.js", "ajax", "html5", "css"];for(var i = 0; i < 5; i++) {var cir = new Circle({x : 135 * Math.cos(90 * i * Math.PI / 180), //圆⼼x轴的坐标 y : 135 * Math.sin(90 * i * Math.PI / 180), //圆⼼y轴的坐标 outR : 45, //外圆的半径inR : 35, //内圆的半径fill : arrColor[i], //填充颜⾊text: arrText[i], //⽂字outOpacity : 0.3, //外圆的透明度inOpacity : 0.6 //内圆的透明度});cir.drawCircle(inGroup);}layer.add(inGroup);//************************************************//运动动画var step = 1; //转动的⾓度var anim = new Konva.Animation(function() {outGroup.rotate(step);outGroup.getChildren().each(function (ele, index) { ele.rotate(-step);});inGroup.rotate(-step);inGroup.getChildren().each(function (ele, index) { ele.rotate(step);});}, layer);anim.start();stage.add(layer);stage.on("mouseover", function () {step = 0.3;});stage.on("mouseout", function () {step = 1;});</script></body></html>js⽂件function Circle(obj) {this._init(obj);}Circle.prototype = {_init: function (obj) {this.x = obj.x, //圆⼼x轴的坐标this.y = obj.y, //圆⼼y轴的坐标this.outR = obj.outR, //外圆的半径this.inR = obj.inR, //内圆的半径this.color = obj.fill, //填充颜⾊this.text = obj.text, //内圆的⽂字this.outOpacity = obj.outOpacity, //外圆的透明度 this.inOpacity = obj.inOpacity //内圆的透明度 },drawCircle: function (group) {//创建⼀个组var groupCir = new Konva.Group({x: this.x,y: this.y});//外圆var outCir = new Konva.Circle({x: 0,y: 0,radius: this.outR,fill: this.color,opacity: this.outOpacity});groupCir.add(outCir);//内圆var inCir = new Konva.Circle({x: 0,y: 0,radius: this.inR,fill: this.color,opacity: this.inOpacity});groupCir.add(inCir);//添加⽂字var text = new Konva.Text({x: -this.inR,y: -10,text: this.text,fill: "white",fontSize: 20,width: 2 * this.inR,align: "center"});groupCir.add(text);group.add(groupCir);}}效果图⽚：以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。
javascript结合canvas实现图片旋转效果
javascript结合canvas实现图⽚旋转效果我们在微博上可以对图⽚进⾏向左转向右转等旋转操作，让⽤户可以从不同的视⾓欣赏图⽚效果。
本⽂将结合实例为您讲解如何使⽤Javascript结合相关技术来实现图⽚的旋转效果。
我们使⽤HTML5的canvas标签可对图⽚进⾏旋转操作，对于ie6，7，8不⽀持HTML5的浏览器，我们使⽤IE特有的滤镜效果来实现图⽚旋转。
HTML我们在页⾯中放置⼀张图⽚，在图⽚的上⽅放置两个按钮，通过onclick事件调⽤rotate()函数来控制图⽚向左向右旋转。
<div id="tool"><a href="#" id="arr_left" onclick="rotate('myimg','left')">向左</a><a href="#" id="arr_right" onclick="rotate('myimg','right')">向右</a></div><div id="img"><img src="demo.jpg" width="460" height="305" alt="" id="myimg" /></div>Javascriptfunction rotate(obj,arr){var img = document.getElementById(obj);if(!img || !arr) return false;var n = img.getAttribute('step');if(n== null) n=0;if(arr=='left'){(n==0)? n=3:n--;}else if(arr=='right'){(n==3)? n=0:n++;}img.setAttribute('step',n);...}我们写了个⾃定义函数rotate（），其中参数obj表⽰要旋转的图⽚对象的id，参数arr表⽰旋转⽅向，固定两个值:left(向左)和right(向右)。
利用html5canvas动态画饼状图的示例代码
利⽤html5canvas动态画饼状图的⽰例代码本⽂介绍了利⽤html5 canvas动态画饼状图的⽰例代码，分享给⼤家，具体如下：先来看效果图这⾥并没引⽤jquery等第三⽅库，只是⽤dom操作和canvas的特性编写的。
canvas画圆⼤体分为实⼼圆和空⼼圆。
根据需求分析知道该圆为实⼼圆。
1.先⽤canvas画实⼼圆//伪代码var canvas = document.createElement("canvas");var ctx = canvas.getContext('2d');ctx.beginPath();ctx.arc(圆⼼x轴坐标,圆⼼y轴坐标,半径,开始⾓,结束⾓);ctx.fillStyle = 'green';ctx.closePath();ctx.fill();2.根据不同颜⾊绘制饼状图//伪代码var canvas = document.createElement("canvas");var ctx = canvas.getContext('2d');ctx.beginPath();ctx.arc(圆⼼x轴坐标,圆⼼y轴坐标,半径,绿⾊开始⾓,绿⾊结束⾓);ctx.fillStyle = 'green';ctx.closePath();ctx.fill();ctx.beginPath();ctx.arc(圆⼼x轴坐标,圆⼼y轴坐标,半径,红⾊开始⾓,红⾊结束⾓);ctx.fillStyle = 'red';ctx.closePath();ctx.fill();ctx.beginPath();ctx.arc(圆⼼x轴坐标,圆⼼y轴坐标,半径,黄⾊开始⾓,黄⾊结束⾓);ctx.fillStyle = 'yellow';ctx.closePath();ctx.fill();ctx.beginPath();ctx.arc(圆⼼x轴坐标,圆⼼y轴坐标,半径,紫⾊开始⾓,紫⾊结束⾓);ctx.fillStyle = 'purple';ctx.closePath();ctx.fill();3.动态绘制饼状图动态绘制圆⽹上普遍推荐三种⽅法：requestAnimationFrame、setInterval（定时）、还有动态算⾓度的。
canvas函数
canvas函数Canvas函数——JavaScript中的绘图利器一、概述Canvas是HTML5中新增的元素，它提供了一种在客户端中绘制图形的方法。
通过JavaScript中的Canvas函数，可以实现在网页中动态展示各种图形和动画效果，使网页更加生动有趣。
二、Canvas函数的基本用法使用Canvas函数，首先需要在HTML中创建Canvas元素。
之后，可以通过JavaScript获取该元素，并利用该元素的上下文（context）对象绘制各种图形。
1.获取Canvas元素利用document对象的getElementById方法，即可获取网页中的Canvas元素。
代码如下：var canvas = document.getElementById("myCanvas");2.获取上下文对象通过Canvas元素的getContext方法，可以获取到上下文对象。
该方法需要传入一个参数，表示上下文的类型，通常使用2d表示2D上下文。
代码如下：var ctx = canvas.getContext("2d");3.绘制图形获取上下文对象之后，就可以使用各种Canvas函数进行绘制了。
以下是几个基本的绘制函数及其用法：（1）绘制矩形Canvas函数中的rect函数可以绘制一个矩形。
该函数需要传入四个参数：矩形左上角的横坐标、矩形左上角的纵坐标、矩形的宽度和高度。
代码如下：ctx.rect(x, y, width, height);ctx.stroke(); //绘制边框（2）填充矩形Canvas函数中的fillRect函数可以绘制一个填充的矩形。
该函数需要传入四个参数：矩形左上角的横坐标、矩形左上角的纵坐标、矩形的宽度和高度。
代码如下：ctx.fillRect(x, y, width, height);（3）绘制圆形Canvas函数中的arc函数可以绘制一个圆形或弧形。
Html基本的动画效果（平移，旋转）
Html基本的动画效果（平移，旋转）在HTML中我们可以⾃⼰制作⼀些有趣的动态动画放⼊页⾯，也可以给⽤户体验增加⼀点趣味，所以合理的利⽤css动画效果。
动画 1.位置：位移 translate（x，y）；2.⼤⼩：缩放 scale（xx px）；1、转化：改变元素的 3.状态：旋转 rotate（xx deg）；4.形态：skew（xx deg）；2、转化属性：css转化属性 transform : none 不转换/ transform-function;转化函数如 transform:translate位移(170px);3、转换原点： transform-origin:如 transform-origin: 50% 50%；取值：数值：以元素左上⽅的点为(0,0)，再去计算其他点百分⽐:0% , 0% : 左上⽅的点50% ， 50% ：元素的中⼼点关键字:leftrighttopbottomcenterleft top : 表⽰左上⽅transform-origin赋值：⼀个值：x轴的移动两个值：x轴和y轴三个值：x轴，y轴，z轴1. 过度2. 动画3. css样式2、2D转换 -位移translate位移：位置移动从当前元素的位置处，移动到指定坐标轴位置处函数：translate(x,y)translate(value);去负值x ：正向右移动负向左移动y : 正向下移动负向上移动单⽅向位移：translateX(x)translateY(y)如：匀速360logo的平移样式与各种速度样式的对⽐图ease:默认模式“慢快慢”；linear：匀速ease-in：由慢到快“加速”ease-out：由快到慢“减速”ease-in-out：（开始）很慢-快-变慢-很慢（结束）background-position 属性能够定位到你需要的图标 x横轴正数向左边负数向右； y轴正数为下负数为上px为单位animation ：定义的动画名持续时间运动⽅式延迟时间次数；3、2D转换 - 缩放缩放：改变元素⼤⼩函数：scale(value)scale(x,y)取值：默认值 1缩⼩：0 - 1 之间的⼩数放⼤：⼤于1scaleX(x) : 横向缩放scaleY(y) : 纵向缩放下图为⾳乐播放的正在播放图标⼀个（注意后⾯的延迟⽐前⾯的时间长，前⾯的时间播放长但是延时短）4、2D转换 - 旋转围绕着指定点，按照指定的⾓度发⽣的旋转函数：rotate(deg)取值：deg 为⾓度 0-360默认为顺时针旋转deg取值为负的话，则将逆时针旋转5、2D转换 - 倾斜函数：skew()取值：为⾓度skewX(x)skewY(y)下图是⼀个加载图标：6、3D转换属性:perspective : 设置假定⼈眼到投影平⾯的距离只影响3D元素，不影响2D元素设置位置：加在⽗元素上，设置好后，其⼦元素就可以完成3D的转换。
详解HTML5canvas绘图基本使用方法
详解HTML5canvas绘图基本使⽤⽅法<canvas></canvas>是HTML5中新增的标签，⽤于绘制图形，实际上，这个标签和其他的标签⼀样，其特殊之处在于该标签可以获取⼀个CanvasRenderingContext2D对象，我们可以通过JavaScript脚本来控制该对象进⾏绘图。
<canvas></canvas>只是⼀个绘制图形的容器，除了id、class、style等属性外，还有height和width属性。
在<canvas>>元素上绘图主要有三步：1. 获取<canvas>元素对应的DOM对象，这是⼀个Canvas对象；2. 调⽤Canvas对象的getContext()⽅法，得到⼀个CanvasRenderingContext2D对象；3. 调⽤CanvasRenderingContext2D对象进⾏绘图。
绘制线段moveTo()和lineTo()以下是⼀个简单的<canvas>绘图⽰例：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>canvas绘图演⽰</title><style type="text/css">#canvas{border: 1px solid #ADACB0;display: block;margin: 20px auto;}</style></head><body><canvas id="canvas" width="300" height="300">你的浏览器还不⽀持canvas</canvas></body><script type="text/javascript">var canvas = document.getElementById("canvas");var context = canvas.getContext("2d");//设置对象起始点和终点context.moveTo(10,10);context.lineTo(200,200);//设置样式context.lineWidth = 2;context.strokeStyle = "#F5270B";//绘制context.stroke();</script></html>如果没有通过moveTo()特别指定，lineTo()的起始点是以上⼀个点为准。
HTML5 canvas基本绘图之图形变换
<canvas></canvas>是HTML5中新增的标签，用于绘制图形，这篇文章主要为大家详细介绍了HTML5 canvas基本绘图之图形变换，感兴趣的小伙伴们可以参考一下<canvas></canvas>是HTML5中新增的标签，用于绘制图形，实际上，这个标签和其他的标签一样，其特殊之处在于该标签可以获取一个CanvasRenderingContext2D对象，我们可以通过JavaScript脚本来控制该对象进行绘图。
<canvas></canvas>只是一个绘制图形的容器，除了id、class、style等属性外，还有height和width属性。
在<canvas>>元素上绘图主要有三步：1.获取<canvas>元素对应的DOM对象，这是一个Canvas对象；2.调用Canvas对象的getContext()方法，得到一个CanvasRenderingContext2D对象；3.调用CanvasRenderingContext2D对象进行绘图。
图形变换平移：context.translate(x,y)，接收参数分别为原点在x轴方向平移x，在y轴方向平移y。
缩放：context.scale(x,y)，接收参数分别为x坐标轴按x比例缩放，y坐标轴按y比例缩放。
旋转：context.rotate(angle)，接收参数是坐标轴旋转的角度。
需要说明的是，对图形进行变化后，接下来的一次绘图是紧接着上一次的状态的，所以如果需要回到初始状态，要用到context.save();和context.restore();来保存和恢复当前状态: JavaScript Codevar canvas = document.getElementById("canvas");var context = canvas.getContext("2d");//translate()context.save();context.fillStyle = "#1424DE";context.translate(10,10);context.fillRect(0,0,200,200);context.restore();//scale()context.save();context.fillStyle = "#F5270B";context.scale(0.5,0.5);context.fillRect(500,50,200,200);context.restore();//rotate()context.save();context.fillStyle = "#18EB0F";context.rotate(Math.PI / 4);context.fillRect(300,10,200,200);context.restore();效果如下：另外一个跟图形变换相关的是：矩阵变换：context.transform(a, b, c, d, e, f, g)。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
这篇文章主要介绍了HTML5 Canvas旋转动画的2个代码例子,实现了一个旋转的太极
图效果,学习HTML5 Canvas旋转动画的朋友可以参考下
效果图：
方法一：
代码如下:
<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="500" height="500">your browser does not support the
canvas tag</canvas>
<script type="text/javascript">
var deg = 0;
var r = 30;
var rl = 100;
function drawTaiji() {
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var colorA = "rgb(0, 0, 0)";
var colorB = "red";
var px =Math.sin(deg)*r;
var py =Math.cos(deg)*r;
context.clearRect(0, 0, 300, 300);
context.beginPath();
context.fillStyle = colorA;
context.arc(rl, rl, 60, 0.5 * Math.PI +deg, 1.5 * Math.PI +deg, true);
context.closePath();
context.fill();
context.fillStyle = colorB;
context.beginPath();
context.arc(rl, rl, 60, 1.5* Math.PI +deg, 0.5 * Math.PI +deg, true);
context.closePath();
context.fill();
context.fillStyle = colorB;
context.beginPath();
context.arc(rl+px, rl-py, 30, 0.5 * Math.PI + deg, 1.5 * Math.PI + deg, true);
context.closePath();
context.fill();
context.fillStyle = colorA;
context.beginPath();
context.arc(rl-px, rl+py, 30, 1.5 * Math.PI + deg, 0.5 * Math.PI + deg, true);
context.closePath();
context.fill();
context.fillStyle = colorA;
context.beginPath();
context.arc(rl+px, rl-py, 8, 0, 2 * Math.PI, true);
context.closePath();
context.fill();
context.fillStyle = colorB;
context.beginPath();
context.arc(rl-px, rl+py, 8, 0, 2 * Math.PI, true);
context.closePath();
context.fill();
deg +=0.1;
}
setInterval(drawTaiji, 100);
</script> </p> <p></body>
</html>
方法二：
代码如下:
<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="500" height="500" >your browser does not support
the canvas tag </canvas>
<script type="text/javascript">
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext("2d");
var angle = 0;
var count = 360;
var clrA = '#000';
var clrB = 'red';
function taiji(x, y, radius, angle, wise) {
angleangle = angle || 0;
wisewise = wise ? 1 : -1;
ctx.save();
ctx.translate(x, y);
ctx.rotate(angle);
ctx.fillStyle = clrA;
ctx.beginPath();
ctx.arc(0, 0, radius, 0, Math.PI, true);
ctx.fill();
ctx.beginPath();
ctx.fillStyle = clrB;
ctx.arc(0, 0, radius, 0, Math.PI, false);
ctx.fill();
ctx.fillStyle = clrB;
ctx.beginPath();
ctx.arc(wise * -0.5 * radius, 0, radius / 2, 0, Math.PI * 2, true);
ctx.fill();
ctx.beginPath();
ctx.fillStyle = clrA;
ctx.arc(wise * +0.5 * radius, 0, radius / 2, 0, Math.PI * 2, false);
ctx.arc(wise * -0.5 * radius, 0, radius / 10, 0, Math.PI * 2, true);
ctx.fill();
ctx.beginPath();
ctx.fillStyle = clrB;
ctx.arc(wise * +0.5 * radius, 0, radius / 10, 0, Math.PI * 2, true);
ctx.fill();
ctx.restore();
}
loop = setInterval(function () {
beginTag = true;
ctx.clearRect(0, 0, canvas.width, canvas.height);
taiji(200, 200, 50, Math.PI * (angle / count) * 2, true);
//taiji(350, 350, 50, Math.PI * ((count - angle) / count) * 2, false);
angle = (angle + 5) % count;
}, 50);
</script> </p> <p></body>
</html>