画布操作介绍画布绘图的环境通过translate(),scale(),rotate(), setTransform()和transform()来改变,它们会对画布的变换矩阵产生影响。函数方法描述translatedx,dx转换的量的 X 和 Y 大小scalesx,sy水平和 ...
画布操作介绍
画布绘图的环境通过translate(),scale(),rotate(), setTransform()和transform()来改变,它们会对画布的变换矩阵产生影响。
函数 | 方法 | 描述 |
translate | dx,dx | 转换的量的 X 和 Y 大小 |
scale | sx,sy | 水平和垂直的缩放因子 |
rotate | angle | 旋转的量,用弧度表示。正值表示顺时针方向旋转,负值表示逆时针方向旋转。 |
setTransform | a,b,c,d,e,f | 水平缩放,水平倾斜(与旋转有关),垂直倾斜(与旋转有关,-水平倾斜),垂直缩放,水平移动,垂直移动 |
transform | a,b,c,d,e,f | 水平缩放,水平倾斜,垂直倾斜,垂直缩放,水平移动,垂直移动 |
translate() 方法为画布的变换矩阵添加水平的和垂直的偏移。参数 dx 和 dy 添加给后续定义路径中的所有点。
scale() 方法为画布的当前变换矩阵添加一个缩放变换。缩放通过独立的水平和垂直缩放因子来完成。例如,传递一个值 2.0 和 0.5 将会导致绘图路径宽度变为原来的两倍,而高度变为原来的 1/2。指定一个负的 sx 值,会导致 X 坐标沿 Y 轴对折,而指定一个负的sy 会导致 Y 坐标沿着 X 轴对折。
rotate() 方法通过指定一个角度,改变了画布坐标和 Web 浏览器中的 <Canvas> 元素的像素之间的映射,使得任意后续绘图在画布中都显示为旋转的。它并没有旋转 <Canvas> 元素本身。注意,这个角度是用弧度指定的。
setTransform() 会将当前的变换矩阵重置为单位矩阵,然后构建新的矩阵。
transform() 添加一个新的变换矩阵,再次绘制矩形,调用 transform() 时,它都会在前一个变换矩阵上构建。
具体使用范例
我们在画布上绘制一个矩形。
1 <!DOCTYPE html> 2 <html> 3 <body> 4 5 <canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"> 6 Your browser does not support the HTML5 canvas tag. 7 </canvas> 8 9 <script>10 11 var c=document.getElementById("myCanvas");12 var ctx=c.getContext("2d");13 14 ctx.fillStyle="yellow";15 ctx.fillRect(0,0,250,100)16 17 </script>18 19 </body>20 </html>
海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理:https://www.xlkjsw.com
原标题:Canvas绘图之平移translate、旋转rotate、缩放scale
关键词:
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。