<body><canvas id="mycanvas" width="400px" height="400px"><!-- 遇到不支持的浏览器 用于提示用户 --><h2>您的浏览器不支持canvas,请换成谷歌浏览器</h2></canvas><script type="text/javascript">
var canvas = document.getElementById("mycanvas");
var g = canvas.getContext("2d");
var radius =10;//半径
var angle =30;//角度
g.lineWidth =10;//线宽
g.beginPath();
g.moveTo(200,200);
console.log(canvas.width/2,canvas.height/2);for(var i =0;i<200;i++){
radius +=0.75;
angle +=(Math.PI*2)/50;
var x = canvas.width/2+ radius*Math.cos(angle);
var y = canvas.height/2+radius*Math.sin(angle);
g.lineTo(x,y);}
g.stroke();</script></body>
二、棒棒糖
<body><canvas width="300" height="600" id="canvas"></canvas><script>
let canvas = document.getElementById('canvas');
let context = canvas.getContext('2d');
context.beginPath();
context.strokeStyle ='lightgray';
context.strokeRect(96,100,8,400);for(let i =100; i >0; i = i-12){
context.beginPath();
context.arc(100,100,i,0,360);//rgba直接生成的棒棒糖颜色会很丑,你可以将这段代码注释看效果// let color = `rgb(${Math.random()*255},${Math.random()*255},${Math.random()*255})`;//通过hsl颜色表示法,生成"艳"一点的颜色
let color = `hsl(${Math.random()*360},80%,60%)`;
context.strokeStyle = color;
context.fillStyle = color;
context.stroke();
context.fill();}</script></body>