html5怎么在画布怎么旋转,javascript – 如何旋转HTML5画布的现有内容？

使用临时画布很容易.

上面的示例绘制了2个框,然后旋转并从0,0到200,200缩放

var canvas = document.getElementById("canvas"),

ctx = canvas.getContext("2d");

canvas.width = canvas.height = 400;

// fill the canvas black, and draw 2 boxes

ctx.fillStyle = "#000";

ctx.fillRect(0,0,400,400);

ctx.fillStyle = "rgb(255,0,0)";

ctx.fillRect(10,10,190,190);

ctx.fillStyle = "rgb(255,255,0)";

ctx.fillRect(250,250,90,90);

// Create a temp canvas to store our data (because we need to clear the other box after rotation.

var tempCanvas = document.createElement("canvas"),

tempCtx = tempCanvas.getContext("2d");

tempCanvas.width = canvas.width;

tempCanvas.height = canvas.height;

// put our data onto the temp canvas

tempCtx.drawImage(canvas,0,0,canvas.width,canvas.height);

// Append for debugging purposes, just to show what the canvas did look like before the transforms.

document.body.appendChild(tempCanvas);

// Now clear the portion to rotate.

ctx.fillStyle = "#000";

ctx.fillRect(0,0,200,200);

ctx.save();

// Translate (190/2 is half of the box we drew)

ctx.translate(190/2, 0);

// Scale

ctx.scale(0.5,0.5);

// Rotate it

ctx.rotate(45*Math.PI/180);

// Finally draw the image data from the temp canvas.

ctx.drawImage(tempCanvas,0,0,200,200,10,10,190,190);

ctx.restore();

html5怎么在画布怎么旋转,javascript – 如何旋转HTML5画布的现有内容？相关推荐

html5实例异步图片加载,javascript – 你如何处理html5的画布图像加载异步？
我一直在学习html5的画布.因为图像可能需要一段时间才能加载,所以适当的技术似乎是在尝试绘制图像之前使用onload来等待图像加载.所以: var fig = document.getElement ...
Javascript是实现HTML5强大功能的重要语言
很长时间以来,JavaScript在我眼里都是编程语言中的二等公民.早先,它经常是很多安全问题的发源地,就像是胶水一样,它能把HTML应用与样式粘到一块,可没有人拿它来正正规规地编写程 ...
HTML5两个画布如何弄,有趣html5（两）----使用canvas结合剧本画在画布上的简单图（html5另一个强大）...
请珍惜劳动小编成果,这篇文章是原来小编,转载请注明出处. 于html5中能够使用canvas标签在画布上绘图,先直接上代码,这篇文章先简介一下canvas的用法.简单画几个圆,矩形,三角形,写字. 在 ...
HTML用画布实现刮刮卡,利用HTML5的画布Canvas实现刮刮卡效果_javascript技巧
先给大家展示效果: 你玩过刮刮卡么?一不小心可以中奖的那种.今天我给大家分享一个基于HTML5技术实现的刮刮卡效果,在PC上只需按住鼠标,在手机上你只需按住指头,轻轻刮去图层就可以模拟真实的刮奖效果. ...
Javascript开发的HTML5游戏的知识产权保护
Javascript开发的HTML5游戏的知识产权保护,其实这里面保护了两个部分,一个是及时注册相关商标和专利,一个是程序的核心算法,核心数据和用户数据的保护. 本文主要讨论第二个方面,在当前这个时间 ...
ai如何旋转画布_ai中怎么使用旋转工具制作旋转对称图？ai中使用旋转工具制作旋转对称图的方法...
ai是一款可以在线编辑的位图软件,你知道ai中怎么使用旋转工具制作旋转对称图的吗?接下来我们一起往下看看ai中使用旋转工具制作旋转对称图的方法吧. 方法步骤 1.我们需要先打开ai软件,按ctrl+N ...
HTML5期末大作业：动漫网站设计——html5响应式手机滑动海贼王漫画网页设计(6页) HTML+CSS+JavaScript
HTML5期末大作业:动漫网站设计--html5响应式手机滑动海贼王漫画网页设计(6页) HTML+CSS+JavaScript 期末作业HTML代码学生网页课程设计期末作业下载 web网页设计制作 ...
HTML5七夕情人节表白网页(情人节满屏爱心HTML5特效) HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码程序员表白源码抖音3D旋转相册 js烟花代码
HTML5七夕情人节表白网页❤情人节满屏爱心HTML5特效❤ HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码程序员表白源码抖音3D旋转相册 js烟花代码 css爱 ...
HTML5 2D游戏引擎研发系列第四章 Canvas技术篇-画布技术-基于手动切片动画
作者:HTML5游戏开发者社区-白泽转载请注明出处:http://html5gamedev.or HTML5 2D游戏引擎研发系列第四章 <Canvas技术篇-画布技术-基于手动切片动画&g ...

html5怎么在画布怎么旋转,javascript – 如何旋转HTML5画布的现有内容？

html5怎么在画布怎么旋转,javascript – 如何旋转HTML5画布的现有内容？相关推荐

最新文章

热门文章