/**
* 在canvas上畫img
* @param ctx
* @param image
* @param x
* @param y
* @param alpha
*/
function drawImage(ctx, image, x, y, alpha) {
// 繪制圖片
ctx.drawImage(image, x, y);
ctx.stroke();
// 獲取從x、y開始，寬為image.width、高為image.height的圖片數(shù)據(jù)
// 也就是獲取繪制的圖片數(shù)據(jù)
let imgData = ctx.getImageData(x, y, image.width, image.height);
for (let i = 0, len = imgData.data.length; i < len; i += 4) {
// 改變每個像素的透明度
imgData.data[i + 3] = imgData.data[i + 3] * alpha;
}
// 將獲取的圖片數(shù)據(jù)放到指定的位置
ctx.putImageData(imgData, x, y);
}
/**
* 下載img
* @param url
* @param name
*/
function downLoadCanvasImg(url, name) {
let oA = document.createElement("a");
oA.download = name + ".png";// 設(shè)置下載的文件名，默認是'下載'
oA.href = url;
document.body.appendChild(oA);
oA.click();
oA.remove(); //下載之后把創(chuàng)建的元素刪除
}
/**
* canvas 繪制虛線
* @param ctx
* @param moveTo
* @param lineTo
* @param pattern
*/
function drawDashedLine(ctx, moveTo, lineTo, pattern) {
ctx.beginPath();
ctx.setLineDash(pattern);
ctx.moveTo(moveTo.x, moveTo.y);
ctx.lineTo(lineTo.x, lineTo.y);
ctx.stroke();
ctx.closePath();
ctx.setLineDash([]);
}
canvas 繪制圖片 下載圖片 dashLine
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。
- 文/潘曉璐 我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人，你說我怎么就攤上這事。” “怎么了？”我有些...
- 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著，像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上，一...
- 文/蒼蘭香墨 我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起，我...
- 正文 年R本政府宣布，位于F島的核電站，受9級特大地震影響，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜，卻給世界環(huán)境...
- 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背。 一陣腳步聲響...
推薦閱讀更多精彩內(nèi)容
- Html5新增的canvas是個強大的功能， 估計大家平時都會用到，只是頻率不高，偶爾用它合成圖片，但是如果不進行...
- 1 前言 1.1 業(yè)務(wù)場景 圖片儲存在后臺中，根據(jù)圖片的地址，在vue頁面中，查看圖片，并根據(jù)坐標標注指定區(qū)域。 ...
- 這不是一個完整的插件,只是做了一些方法的記錄..完整的裁剪圖片太復(fù)雜了
- 寫在前面業(yè)務(wù)需要在PC+wap頁面上動態(tài)生成一張海報圖片，于是便有了這個基于React繪制海報的組件 (?￣ ?￣...
