一、蚊香
<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>
三、爱心
<body>
<canvas id="mycanvas" width="400px" height="400px">
<!-- 遇到不支持的浏览器 用于提示用户 -->
<h2>您的浏览器不支持canvas,请换成谷歌浏览器</h2>
</canvas>
<script type="text/javascript">
var canvas = document.getElementById("mycanvas");
//创建画笔
var context = canvas.getContext("2d");
context.fillStyle = "red";
context.beginPath();
context.lineStyle = "red";
context.moveTo(75,40)
//左半边的桃心，从凹进去的地方开始画
context.bezierCurveTo(75,40,70,25,50,25);
context.bezierCurveTo(20,30,20,60,20,60);
context.bezierCurveTo(20,80,40,102,75,120);
//右半边的桃心，从桃心尖尖部分开始画
context.bezierCurveTo(110,100,130,80,130,60);
context.bezierCurveTo(130,65,130,25,100,25);
context.bezierCurveTo(85,25,75,35,75,40);
context.stroke();
context.fill();
</script>
</body>
四、五角星
//获取元素
var c = document.getElementById("canvas");
var context = c.getContext("2d");
//绘制五角星
context.beginPath();
//moveTo(x,y):将绘图游标移动到（x,y），不画线
context.moveTo(0,100);
//lineTo(x,y):从上一点开始绘制一条直线，到(x,y)为止。
context.lineTo(300,100);
context.lineTo(60,300);
context.lineTo(150,0);
context.lineTo(240,300);
context.closePath();
context.stroke();
context.beginPath();
context.moveTo(300,100);
context.lineTo(420,100);
context.lineTo(450,0);
context.lineTo(480,100);
context.lineTo(600,100);
context.lineTo(510,180);
context.lineTo(540,300);
context.lineTo(450,230);
context.lineTo(360,300);
context.lineTo(390,180);
context.closePath();
context.stroke();
context.fillStyle="red";
context.beginPath();
context.moveTo(600,100);
context.lineTo(720,100);
context.lineTo(750,0);
context.lineTo(780,100);
context.lineTo(900,100);
context.lineTo(810,180);
context.lineTo(840,300);
context.lineTo(750,230);
context.lineTo(660,300);
context.lineTo(690,180);
context.fill();
//五角星结束
