### canvas畫圓 ```javascript function drawCircular(ctx, width, height, x, y, url) { var avatarurl_width = width; var avatarurl_heigth = height; var avatarurl_x = x; var avatarurl_y = y; ctx.save(); ctx.beginPath(); ctx.arc(avatarurl_width / 2 + avatarurl_x, avatarurl_heigth / 2 + avatarurl_y, avatarurl_width / 2, 0, Math.PI * 2, false); ctx.clip(); ctx.drawImage(url, avatarurl_x, avatarurl_y, avatarurl_width, avatarurl_heigth); ctx.restore(); } ``` ``` wxhead.onload = function () { drawCircular(ctx, 173, 173, 455, 438, wxhead); } ``` ### canvas畫圖生成海報 * 創建畫布 ```html <canvas id="myCanvas" style="opacity: 0;" width="1080" height="1755"></canvas> ``` * Canvas-圖片 ``` myCanvas = document.getElementById("myCanvas"); let ctx = myCanvas.getContext("2d"); // 生成海報 setPoster = function () { var img = new Image(); img.src = $(".can-bg").attr("data-src"); // img.crossOrigin = "Anonymous"; // img.setAttribute('crossOrigin', 'anonymous'); img.onload = function () { ctx.drawImage(img, 0, 0, 1080, 1755); //背景 ctx.font = "43px Arial"; ctx.fillStyle = "#000"; ctx.textAlign = "center"; ctx.fillText(text, 800, 1235); // 字 var title = new Image() title.src = t_img title.onload = function () { ctx.drawImage(title, 210, 547, 686, 310); // 其他動態圖片 var createImg = new Image() createImg.src = myCanvas.toDataURL("image/jpeg") createImg.onload = function () { $("#ShareImg").attr("src", createImg.src); // 對應覆蓋圖片 } } } } ``` ### Canvas-下載 ```javascript //下載海報 function downloadimg() { var img = $('.box').children('img').attr("src"); var alink = document.createElement("a"); alink.href = img; alink.download = "新年快樂.png"; alink.click(); } ```