<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
border: 0;
font-size: 0;
}
</style>
</head>
<body >
<div>
<canvas id="myCanvas1" >
您的浏览器不支持Canvas，请升级浏览器
</canvas>
<canvas id="myCanvas2" style="position: relative;left: -13.4px;">
您的浏览器不支持Canvas，请升级浏览器
</canvas>
<canvas id="myCanvas3" style="position: relative;left: -26.8px;">
您的浏览器不支持Canvas，请升级浏览器
</canvas>
</div>
<input type="range" id="slider" min="-300" max="300" step="0.8" value="0" oninput="change()" οnchange="change()" />
<script>
var r=50;
var c1= canvas('myCanvas1');
var c2= canvas('myCanvas2');
var c3= canvas('myCanvas3');
function change(){
var value =document.getElementById("slider").value;
//将信息显示
console.log(value);
c1.style.webkitTransform = 'rotate('+value+'deg)';
c2.style.webkitTransform = 'rotate('+value+'deg)';
c3.style.webkitTransform = 'rotate('+value+'deg)';
}
function canvas(c){
var canv = document.getElementById(c);
var ctx1 = canv.getContext('2d'); //
ctx1.canvas.width = 2*r; //js获取宽高
ctx1.canvas.height = 2*r;
ctx1.beginPath();
ctx1.moveTo(r, 0); //起点
ctx1.lineTo(r-(r/2)*1.732, r+r/2); // 0.268
ctx1.lineTo(r+(r/2)*1.732, r+r/2);
ctx1.lineTo(r, 0);
ctx1.stroke();
ctx1.beginPath();
ctx1.arc(r, r, r, 0, Math.PI * 2, true);
ctx1.closePath();
ctx1.stroke();
return canv;
}
</script>
</body>
</html>