径向渐变.png

3.2 使用图片填充画布

完整代码请戳Lesson2/demo7.html

//第一个参数，表示填充一个图片，第二个参数填充方式 createPattern(img,repeat-style) window.onload = function () { var canvas = document.getElementById("canvas"); canvas.width = 300; canvas.height = 300; var context = canvas.getContext("2d"); 　　//创建一个图片对象 var backGroundImage = new Image(); backGroundImage.src = "lemon.png"; backGroundImage.onload = function () { var pattern = context.createPattern(backGroundImage, "repeat"); context.fillStyle = pattern; context.fillRect(0, 0, 300, 300); } }

图片填充.png

3.3 使用另一个canvas填充画布

完整代码请戳Lesson2/demo8.html

//第一个参数，表示填充另外一个画布，第二个参数填充方式 createPattern(canvas,repeat-style) window.onload = function () { var canvas = document.getElementById("canvas"); canvas.width = 400; canvas.height = 400; var context = canvas.getContext("2d"); var backCanvas = creatBackCanvas(); var pattern = context.createPattern(backCanvas, "repeat"); context.fillStyle = pattern; context.fillRect(0, 0, 400, 400); }; //创建一个背景画布，画布中绘制一颗星星 function creatBackCanvas() { var backCanvas = document.createElement("canvas"); backCanvas.width = 100; backCanvas.height = 100; var backCanvasContext = backCanvas.getContext("2d"); drawStar(backCanvasContext, 50, 50, 20, 0); return backCanvas; } //绘制星星 function drawStar(cxt, x, y, R, a) { cxt.beginPath(); for (let i = 0; i < 5; i++) { cxt.lineTo(Math.cos((18 + i * 72 - a) / 180 * Math.PI) * R + x, -Math.sin((18 + i * 72 - a) / 180 * Math.PI) * R + y); cxt.lineTo(Math.cos((54 + i * 72 - a) / 180 * Math.PI) * R/2 + x, -Math.sin((54 + i * 72 - a) / 180 * Math.PI) * R/2 + y); } cxt.closePath(); cxt.fillStyle = "#F8D184"; cxt.strokeStyle = "#FAD085"; cxt.lineWidth = 3; cxt.lineJoin = "round"; cxt.fill(); cxt.stroke(); }

使用canvas填充.png

总结：填充样式 fillStyle fillStyle = color （颜色） gradient（渐变） image （图片） canvas （画布）

下节预告：曲线的绘制，文字的渲染

转载本站任何文章请注明：转载至神刀安全网，谢谢神刀安全网 » Canvas从入门到放弃 (二)

相关推荐

评论 抢沙发