canvas縮放div程式碼例項

admin發表於2017-02-17
Canvas

分享一段程式碼例項，它實現了縮放div的效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
</head>
<body>
<canvas id="myCanvas" width="500" height="300"></canvas>
<script>
var c = document.getElementById("myCanvas");
var context = c.getContext("2d");
context.setTransform(1, 0, 0, 1, 0, 0);
var x = 100;
var y = 100;
var width = 50;
var height = 50;
context.translate(x + .5 * width, y + .5 * height);
context.scale(2, 2);
context.fillStyle = "red";
context.fillRect(-.5 * width, -.5 * height, width, height);
</script>
</body>
</html>

相關文章