正文
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>
