<!-- |
| - | -------------------------------------------------------------------------------------------------------------------------- |
| | * @Descripttion: |
| | * @Author: voanit |
| | * @Date: 2023-04-05 17:10:31 |
| | * @LastEditors: voanit |
| | * @LastEditTime: 2023-04-05 21:17:59 |
| | --> |
| | <!DOCTYPE html> |
| | <html lang="en"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta http-equiv="X-UA-Compatible" content="IE=edge"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | <title>Document</title> |
| | </head> |
| | <body> |
| | <canvas id="canvas" width="300" height="300"></canvas> |
| | </body> |
| | </html> |
| | <script> |
| | var canvas = document.querySelector('#canvas') |
| | var ctx = canvas.getContext('2d'); |
| | let w = 300 |
| | let h = 300 |
| | let r1= 140 |
| | let r2 = 100 |
| | let lh = 1 |
| | let num = 6 |
| | let arc = (360) / num |
| | |
| | |
| | |
| | // 涂色 |
| | for(let i = 0 ; i < num ; i++ ) { |
| | ctx.beginPath(); |
| | ctx.moveTo(w/2, h/2) |
| | ctx.arc(w / 2, h / 2, r1, (i * arc - arc/2 - 90 )/180 * Math.PI, ((i+ 1) * arc - arc/2 - 90 ) / 180 * Math.PI , false) |
| | ctx.fillStyle = i % 2 == 0 ? "#FFEBBD" : '#FFF9ED'; |
| | ctx.fill(); |
| | } |
| | |
| | for(let i = 0 ; i < num; i++ ) { |
| | ctx.beginPath(); |
| | ctx.moveTo(w/2, h/2) |
| | ctx.arc(w / 2, h / 2, r2, (i * arc - arc / 2 - 90 )/180 * Math.PI, ((i+ 1) * arc - arc / 2 - 90 ) / 180 * Math.PI , false) |
| | ctx.fillStyle = i % 2 == 0 ? "#FFF9ED" : '#FFEBBD'; |
| | ctx.fill(); |
| | } |
| | |
| | for(let i = 0 ; i < 1 ; i++ ) { |
| | |
| | let i = 0 |
| | |
| | // var grad = ctx.createLinearGradient(0,0,500,500); |
| | // grad.addColorStop(0,'green'); |
| | |
| | // grad.addColorStop(0.5,'yellow'); |
| | |
| | // grad.addColorStop(1,'blue'); |
| | // ctx.fillStyle = grad; |
| | var grd=ctx.createLinearGradient(w/2, h/2, w/2 + Math.cos(45/188*Math.PI), Math.cos(45/188*Math.PI)); |
| | let c1 = '#FF8A00' |
| | let c2 = '#FFA133' |
| | grd.addColorStop(0,c1); |
| | grd.addColorStop(0.2,c1); |
| | |
| | grd.addColorStop(0.2,c2); |
| | grd.addColorStop(0.4,c2); |
| | |
| | grd.addColorStop(0.4,c1); |
| | grd.addColorStop(0.5,c1); |
| | |
| | grd.addColorStop(0.5,c2); |
| | grd.addColorStop(0.7,c2); |
| | |
| | grd.addColorStop(0.7,c1); |
| | grd.addColorStop(0.8,c1); |
| | grd.addColorStop(0.8,c2); |
| | grd.addColorStop(1,c2); |
| | grd.addColorStop(1,c2); |
| | ctx.fillStyle=grd; |
| | ctx.beginPath(); |
| | ctx.moveTo(w/2, h/2) |
| | ctx.arc(w / 2, h / 2, r1, (i * arc - arc/2 - 90 )/180 * Math.PI, ((i+ 1) * arc - arc/2 - 90 ) / 180 * Math.PI , false) |
| | ctx.fill() |
| | } |
| | |
| | |
| | // // 画圆 |
| | ctx.beginPath(); |
| | ctx.fillStyle = '#FE5B1F'; |
| | ctx.strokeStyle = '#FE5B1F'; |
| | ctx.lineWidth = lh |
| | ctx.arc(w/2, h/2, r1, 0, 2 * Math.PI, false); |
| | ctx.stroke(); |
| | ctx.beginPath(); |
| | |
| | ctx.lineWidth = lh * 4 |
| | ctx.arc(w/2, h/2, r2, 0, 2 * Math.PI, false); |
| | ctx.stroke(); |
| | |
| | // // 画线 |
| | for(let i = 0 ; i < num; i++ ) { |
| | ctx.beginPath(); |
| | ctx.moveTo(w/2, w/2); // 落笔点 |
| | |
| | let x = w / 2 + r1 * Math.sin((i * arc - arc /2)/ 180 * Math.PI) |
| | let y = h / 2 - r1 * Math.cos((i * arc - arc /2)/ 180 * Math.PI) |
| | ctx.lineTo(x, y); // 从落笔点画一条线（路径）到指定位置 |
| | |
| | ctx.stroke(); |
| | } |
| | |
| | // // 画点 |
| | // for(let i = 0 ; i < num; i++ ) { |
| | // ctx.beginPath(); |
| | // let x = w / 2 + r1 * Math.sin((i * arc - arc /2)/ 180 * Math.PI) |
| | // let y = h / 2 - r1 * Math.cos((i * arc - arc /2)/ 180 * Math.PI) |
| | // ctx.arc(x, y, lh * 4, 0, 2 * Math.PI, false); |
| | // ctx.fillStyle = "green"; |
| | // ctx.fill(); |
| | // } |
| | |
| | for(let i = 0 ; i < num; i++ ) { |
| | ctx.beginPath(); |
| | let x = w / 2 + r2 * Math.sin((i * arc - arc /2)/ 180 * Math.PI) |
| | let y = h / 2 - r2 * Math.cos((i * arc - arc /2)/ 180 * Math.PI) |
| | ctx.arc(x, y, lh * 8, 0, 2 * Math.PI, false); |
| | ctx.fillStyle = "#FE5B1F"; |
| | ctx.fill(); |
| | } |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | </script>
