欢迎访问 生活随笔！
TAG聚合

生活随笔

当前位置： 首页 > 编程资源 > 编程问答 >内容正文

编程问答

Canvas scale- 缩放

发布时间：2024/4/14 编程问答 42 豆豆
生活随笔 收集整理的这篇文章主要介绍了 Canvas scale- 缩放 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

可以进行坐标缩放，设为负值可以翻转图片；

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>scale</title> </head><body><canvas id='myCanvas' width='800' height='600'>your browser does not support canvas</canvas><script type="text/javascript">var c = document.getElementById('myCanvas');var ctx = c.getContext('2d');ctx.beginPath();ctx.strokeStyle = '#000000';ctx.strokeRect(10, 10, 150, 100);ctx.scale(3, 3);ctx.beginPath();ctx.strokeStyle = '#cccccc';ctx.strokeRect(10, 10, 150, 100);ctx.scale(0.15,0.15);ctx.beginPath();ctx.strokeStyle = '#ff0000';ctx.strokeRect(10,10,150,100);</script> </body></html> <!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>scale</title> </head><body><canvas id='myCanvas' width='800' height='600'>your browser does not support canvas</canvas><script type="text/javascript">var c = document.getElementById('myCanvas');var ctx = c.getContext('2d');var img = new Image();img.src = 'face.jpg';img.onload = function() {ctx.drawImage(img, 10, 10);ctx.scale(1, -1);ctx.drawImage(img, 250, -250);ctx.arc(250, -250, 20, 0, 2 * Math.PI, true);ctx.stroke();};</script> </body></html>

 

总结

以上是生活随笔为你收集整理的Canvas scale- 缩放的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。