html5 图片旋转
找了很久，终于找到图片旋转的方法了，现在向大家分享一下！
<!DOCTYPE HTML><html> <head> <title>test rotate</title> <script type="text/javascript"> function startup() { var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var img = new Image(); img.src = 'Penguins.jpg'; img.onload = function() { ctx.translate(img.width / 2, img.height / 2); ctx.rotate(30 * Math.PI / 180); ctx.drawImage(img, 0, 0, 164, 164); } } </script> </head> <body onload='startup();'> <div id="pw_body" style="width:100%;height:100%"> <canvas id="canvas" style="position: absolute; left: 300px; top: 300px;" width="800" height="600"></canvas> </div> </body> </html> |
效果图：
作者：Work Hard Work Smart
出处：http://www.cnblogs.com/linlf03/
欢迎任何形式的转载，未经作者同意，请保留此段声明！
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 【译】Visual Studio 中新的强大生产力特性
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
· 字符编码：从基础到乱码解决