html5 canvas rotate属性实现图片旋转

官网通编辑 • • SEO技术 • 179 阅读

gooood个人博客网站

canvas

html5 canvas rotate属性实现图片旋转
<!doctype html> <html> <head> <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> <style> body{ background-color: ivory; } canvas{border:1px solid red;} </style> <script> $(function(){ var canvas=document.getElementById("canvas"); var ctx=canvas.getContext("2d"); var angleInDegrees=0; var image=document.createElement("img"); image.onload=function(){ ctx.drawImage(image,canvas.width/2-image.width/2,canvas.height/2-image.width/2); } image.src="https://www.baidu.com/img/bd_logo1.png?where=super"; $("#clockwise").click(function(){ angleInDegrees+=30; drawRotated(angleInDegrees); }); $("#counterclockwise").click(function(){ angleInDegrees-=30; drawRotated(angleInDegrees); }); function drawRotated(degrees){ ctx.clearRect(0,0,canvas.width,canvas.height); ctx.save(); ctx.translate(canvas.width/2,canvas.height/2); ctx.rotate(degrees*Math.PI/180); ctx.drawImage(image,-image.width/2,-image.width/2); ctx.restore(); } }); // end $(function(){}); </script> </head> <body> <canvas width=300 height=300></canvas><br> <button>Rotate right</button> <button>Rotate left</button> </body> </html>

本文内容由用户注册发布，仅代表作者或来源网站个人观点，不代表本网站的观点和立场，与本网站无关。本网系信息发布平台，仅提供信息存储空间服务，其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本网站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。如因作品内容侵权需删除与其他问题需要同本网联系的，请尽快通过本网的邮箱或电话联系。 
THE END
分享
二维码
< <上一篇
下一篇>>