图片.png

2.3 缩放scale(sx,sy)

完整代码请戳Lesson2/demo4.html

window.onload = function () { var canvas = document.getElementById("canvas"); canvas.width = 400; canvas.height = 400; var context = canvas.getContext("2d"); context.fillStyle = "#283D52"; context.fillRect(0, 0, canvas.width, canvas.height); for (var i = 0; i < 80; i++) { //大圆半径在[5-15)之间 var R = Math.random() * 10 + 5; //x轴偏移量 var x = Math.random() * canvas.width; //y轴偏移量 var y =Math.random() * canvas.height; //旋转角度 var a = Math.random() * 360; drawStar(context, x, y, R, a); } }; function drawStar(cxt, x, y, R, rot) { cxt.save(); //x,y轴的偏移量 cxt.translate(x, y); //旋转的角度 cxt.rotate(rot / 180 * Math.PI); //缩放的大小 cxt.scale(R, R); drawPath(cxt); cxt.fillStyle = "#F8D184"; cxt.lineJoin = "round"; cxt.fill(); cxt.restore(); } //绘制一个星星的路径(绘制的星星看不见，因为这里没有设置半径，在上面用scale控制半径) function drawPath(cxt) { cxt.beginPath(); for (var i = 0; i < 5; i++) { //绘制大圆上的五个坐标点 cxt.lineTo(Math.cos((18 + i * 72 ) / 180 * Math.PI), 　　　　-Math.sin((18 + i * 72) / 180 * Math.PI)); //绘制小圆上的五个坐标点 cxt.lineTo(Math.cos((54 + i * 72) / 180 * Math.PI) * 0.5, 　　　-Math.sin((54 + i * 72) / 180 * Math.PI) *0.5); } cxt.closePath(); }

图片.png

3. 填充样式 3.1 渐变

线性渐变

step1: 设置渐变线

//参数是两个坐标，构成了一条线段 var linearGrad = context.createLinearGradient(xstart,ystart,xend,yend)

step 2:在渐变线上设置关键色

//stop决定关键色的位置，color决定关键色的颜色 linearGrad.addColorStop(stop,color);

绘制一片线性渐变的星空
完整代码请戳Lesson2/demo5.html

var canvas = document.getElementById("canvas"); canvas.width = 400; canvas.height = 400; var context = canvas.getContext("2d"); var linearGrad = context.createLinearGradient(0, 0, 0, 400); linearGrad.addColorStop(0, '#1C213B'); linearGrad.addColorStop(0.25, '#2A2D49'); linearGrad.addColorStop(0.5, '#4D4D5F'); linearGrad.addColorStop(0.75, '#916580'); linearGrad.addColorStop(1.0, '#C3919A'); context.fillStyle = linearGrad; context.fillRect(0, 0, canvas.width, canvas.height);

线性渐变.png

径向渐变

step 1: 设置渐变线

//参数为第一个圆的圆心，半径，第二个圆的圆心，半径 var linearGrad = context.createRadialGradient(x0,y0,r0,x1,y1,r1);

step 2: 在渐变线上设置渐变色

//stop决定关键色的位置，color决定关键色的颜色 linearGrad.addColorStop(stop,color);

绘制一片径向渐变的星空
完整代码请戳Lesson2/demo6.html

var canvas = document.getElementById("canvas"); canvas.width = 400; canvas.height = 400; var context = canvas.getContext("2d"); var linearGrad = context.createRadialGradient(canvas.width/2, canvas.height, 0, canvas.width/2,canvas.height,canvas.height); linearGrad.addColorStop(0, '#CC99A1'); linearGrad.addColorStop(1.0, '#213244'); context.fillStyle = linearGrad; context.fillRect(0, 0, canvas.width, canvas.height);