android短视频开发，js如何设置canvas绕图形中心旋转

1. 准备一个页面

拟写一个页面，用于实验，代码如下

<br><!DOCTYPE html><br><html><br><head><br><meta charset="utf-8"><br><meta name="viewport" content="width=device-width, initcal-scale=1.0"/><br><title>对称图 Symmetric graph</title><br><style><br>body{<br>margin: 0;<br>}<br>#box{<br>width: 100vw;<br>height: 100vw;<br>}<br>.control{<br>padding: 5px;<br>}<br></style><br></head><br><body><br><div id="box"></div><br><div class="control"><br><label><br>旋转角度：<input type="range" value="0" id="input1" min="0" max="360" /> <small id="label1">0</small>°<br></label><br></div><br><script><br>window.onload = () => {<br>//...<br>}<br></script><br></body><br></html><br> 

2. 编写脚本代码

页面写好了，再写页面的一些脚本代码，把不会实现的方法放在最后写

<br>let box = document.getElementById('box');<br>let canvas = document.createElement('canvas');<br>canvas.width=box.offsetWidth;<br>canvas.height=box.offsetHeight;<br>let ctx = canvas.getContext('2d');<br>let pCenter = {<br>x: canvas.width/2,<br>y: canvas.height/2,<br>r: canvas.width/2,<br>};<br>ctx.arc(pCenter.x,pCenter.y,pCenter.r*0.02,0,2*Math.PI);<br>ctx.arc(pCenter.x,pCenter.y,pCenter.r*0.2,0,2*Math.PI);<br>ctx.stroke();<br>ctx.beginPath();<br>let padding = canvas.width*0.2;<br>ctx.rect(0,0,canvas.width,canvas.height);<br>ctx.stroke();<br>ctx.fillStyle = 'rgba(0,0,0,0.2)';<br>ctx.fillRect(padding,padding,canvas.width-padding*2,canvas.height-padding*2);<br>let img = new Image();<br>img.onload = () => {<br>ctx.clearRect(0,0,canvas.width,canvas.height);<br>ctx.drawImage(img,0,0);<br>};<br>img.src = canvas.toDataURL();<br>box.appendChild(canvas);<br>const setCenterRotate = (angle) => {<br>//待实现...<br>};<br>const label = document.getElementById('label1');<br>document.getElementById('input1').addEventListener('change',(e)=>{<br>label.innerText = e.target.value;<br>setCenterRotate(parseInt(e.target.value));<br>}) 