当前位置：网站首页>Canvas - rotate
Canvas - rotate
2022-07-24 05:34:00 【Plum blossom three】
canvas It's based on states , Each translation 、 rotate 、 The zoom 、 Before matrix transformation , First call save() Save the current drawing state , After the transformation , To continue using the state before the transformation , call restore() The method can .
design sketch ：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#cvs {
background-color: #ccc;
}
</style>
</head>
<body>
<div id='container'>
<canvas id='cvs'>
sorry, your browser doesn't support canvas API.
</canvas>
</div>
</body>
<script>
window.onload = function() {
// Get canvas
const cvs = document.querySelector('#cvs')
cvs.width = 800
cvs.height = 600
// Get the brush
const ctx = cvs.getContext('2d')
for(let i = 0; i < 11; i++) {
ctx.save()
ctx.translate(400, 300)
ctx.rotate(36 * i * Math.PI / 180)
ctx.bezierCurveTo(30, 50, 350, 550, 100, 150)
ctx.fillStyle = 'rgba(255, 0, 255, 0.25)'
ctx.fill()
ctx.restore()
}
}
</script>
</html>
