本文目錄一覽：
- 1、html5 canvas上面畫的圖形，有沒有類似於ID,Value這種屬性？（我需要存放一個字元，並且可讀取）
- 2、微信小程序中利用canvas 2d繪製的海報，獲取圖片臨時地址第一次報錯，第二次又沒問題了，請問怎麼解決啊？
- 3、2022-06-14 Canvas畫布模糊問題
- 4、如何優雅的處理canvas繪製圓形出現的鋸齒
- 5、HTML5如何通過canvas，把兩張圖片繪製到畫布，然後導出大圖
html5 canvas上面畫的圖形，有沒有類似於ID,Value這種屬性？（我需要存放一個字元，並且可讀取）
主要思想是藉助Canvas自己的API – toDataURL()來實現，整個實現
html
meta http-equiv=”X-UA-Compatible” content=”chrome=1″
head
script
window.onload = function() {
draw();
var saveButton = document.getElementById(“saveImageBtn”);
bindButtonEvent(saveButton, “click”, saveImageInfo);
var dlButton = document.getElementById(“downloadImageBtn”);
bindButtonEvent(dlButton, “click”, saveAsLocalImage);
};
function draw(){
var canvas = document.getElementById(“thecanvas”);
var ctx = canvas.getContext(“2d”);
ctx.fillStyle = “rgba(125, 46, 138, 0.5)”;
ctx.fillRect(25,25,100,100);
ctx.fillStyle = “rgba( 0, 146, 38, 0.5)”;
ctx.fillRect(58, 74, 125, 100);
ctx.fillStyle = “rgba( 0, 0, 0, 1)”; // black color
ctx.fillText(“Gloomyfish – Demo”, 50, 50);
}
function bindButtonEvent(element, type, handler)
{
if(element.addEventListener) {
element.addEventListener(type, handler, false);
} else {
element.attachEvent(‘on’+type, handler);
}
}
function saveImageInfo ()
{
var mycanvas = document.getElementById(“thecanvas”);
var image = mycanvas.toDataURL(“image/png”);
var w=window.open(‘about:blank’,’image from canvas’);
w.document.write(“img src='”+image+”‘ alt=’from canvas’/”);
}
function saveAsLocalImage () {
var myCanvas = document.getElementById(“thecanvas”);
// here is the most important part because if you dont replace you will get a DOM 18 exception.
// var image = myCanvas.toDataURL(“image/png”).replace(“image/png”, “image/octet-stream;Content-Disposition: attachment;filename=foobar.png”);
var image = myCanvas.toDataURL(“image/png”).replace(“image/png”, “image/octet-stream”);
window.location.href=image; // it will save locally
}
/script
/head
body bgcolor=”#E6E6FA”
div
canvas width=200 height=200 id=”thecanvas”/canvas
button id=”saveImageBtn”Save Image/button
button id=”downloadImageBtn”Download Image/button
/div
/body
/html
微信小程序中利用canvas 2d繪製的海報，獲取圖片臨時地址第一次報錯，第二次又沒問題了，請問怎麼解決啊？
微信小程序中利用繪製的海報獲取圖片，臨時地址，第一次報錯可進行下一次更正。
2022-06-14 Canvas畫布模糊問題
【重要】view大小(屬性值決定最終上屏時的縮放比例) 畫布bufffer大小 gl.viewPort視口大小(映射畫布坐標到NDC坐標 -1到1 GL世界的坐標)
所有view單位 和 buffer單位不一致的，都要 渲染引擎提供處理的。
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(screenCanvas.clientWidth, screenCanvas.clientHeight);
json文件內為view單位，創建buffer用的物理像素，繪製通過render 給定dstR 做映射，實現了view單位到物理像素單位的映射。
void Animation::render(SkCanvas* canvas, const SkRect* dstR) {
const SkRect srcR = SkRect::MakeSize(this-size());
if (dstR) {
canvas-concat(SkMatrix::MakeRectToRect(srcR, *dstR, SkMatrix::kCenter_ScaleToFit));
}
}
要自己手動調整和映射。canvas.scale
如何解決畫布模糊問題
畫布大小、圖片繪製尺寸、保存圖片實際尺寸。viewsize、buffersize。
!DOCTYPE html
html
body
img src=”” id=”tupian”
canvas id=”myCanvas” width=”200″ height=”200″ style=”width:200px;height:200px;border:1px solid”
Your browser does not support the HTML5 canvas tag.
/canvas
script
var c = document.getElementById(“myCanvas”);
var pixelRatio = 2;
c.width = 200 * pixelRatio;
c.height = 200 * pixelRatio;
var ctx = c.getContext(“2d”);
//ctx.scale(pixelRatio, pixelRatio)
var img = document.getElementById(“tupian”);
ctx.drawImage(img, 10, 10);
ctx.fillStyle = “#92B901”;
ctx.fillRect(50, 50, 100, 100);
ctx.font = “30px Arial”;
ctx.fillText(“Hello World”+pixelRatio, 10, 50);
/script
button onclick=”clearCanvas()”Clear canvas/button
/body
/html
前端css尺寸px是邏輯像素呀，並且window.innerWidth也會邏輯像素。在做threejs的適配是，沒有單獨設置 canvas.width(決定物理像素) ，而是修改的 canvas.style={ width: width + “px”,} (決定虛擬像素) 。 如果不設置 width 的話，默認 canvas.width = canvas.style.width * pixleRadio 。 適配threejs沒有設置width，所以要傳遞給devicePixelRatio 給threejs 讓他內部自己換算到物理物理像素。screenCanvas.clientWidth == viewWidth； viewWidth = getIntValue(viewWidth, w); bufferWidth = getIntValue(bufferWidth, w);
這樣的話，繪製介面的坐標 可以走CSS(雖然繪製API單位是物理像素，但是threejs內部有canvas.scale的設置，保證了可以走CSS單位)
如果需要自己調整畫布大小呢，用於降級，則可以，自己給定一個devicePixelRatio值，並手動設置canvas.width 和 renderer.setPixelRatio 。
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(screenCanvas.clientWidth, screenCanvas.clientHeight);
skottie的流程是
view大小(屬性值決定最終上屏時的縮放比例) 畫布bufffer大小 gl.viewPort視口大小(映射畫布坐標到NDC坐標 -1到1 GL世界的坐標)
ViewPort指定坐標比畫布buffer大時，繪製超出畫布buffer，走Per-Sample_Processing 相關的流程 做裁剪。 Early Fragment Test 可能是有 被剔除
前端html中定義tag的寬高，映射到native決定了自身view的大小和寬高radio。
surface畫布物理大小在內存降級時，可以自己降低scale屏幕密度值來減少內存佔用，但是要保持radio。
如果radio不一致，則會存在拉伸，在上屏時，由系統根據View的寬高屬性，拉伸畫布。
在一塊很大的畫布上，居中繪製，則可以通過glviewport來實現的。
但是如何保持讓2d繪製依然使用 邏輯像素單位呢，主要為了生成頂點作用用的。
void Animation::render(SkCanvas* canvas, const SkRect* dstR) {
const SkRect srcR = SkRect::MakeSize(this-size());
if (dstR) {
canvas-concat(SkMatrix::MakeRectToRect(srcR, *dstR, SkMatrix::kCenter_ScaleToFit));
}
}
如何優雅的處理canvas繪製圓形出現的鋸齒
Html5 Canvas 畫橢圓有鋸齒：因為在Canvas中整數坐標值對應的位置恰巧是屏幕象素點中間的夾縫，那麼當按這樣的坐標進行線條渲染時所要用到的就是夾縫兩邊的象素點，這樣即便設置了lineWidth為1也將看到兩個象素效果的線條，解決方法原象素點+0.5進行偏移。
下面是處理前後的效果比較：
!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “”
html
head
meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″
titlecanvasTest/title
script type=”text/javascript” src=””/script
script type=”text/javascript”
var MyCanvas = function(boxObj, width, height) {
//序號、計數
this.index = arguments.callee.prototype.Count = (arguments.callee.prototype.Count || 0) + 1;
var cvs = document.createElement(“canvas”);
cvs.id = “myCanvas” + this.index;
cvs.width = width || 800;
cvs.height = height || 600;
(boxObj || document.body).appendChild(cvs);
//excanvas框架中針對ie載入canvas延時問題手動初始化對象
if (typeof G_vmlCanvasManager != “undefined”) G_vmlCanvasManager.initElement(cvs);
//2D畫布對象
this.ctx = cvs.getContext(“2d”);
/* * 繪製線條
* @ops JSON對象，可按實際支持屬性擴展，示例： { lineWidth:1,strokeStyle:’rgb(255,255,255)’ }
* @dotXY:{ x:0, y:0 } ||[{ x:0, y:0 },{ x:0, y:0 }]
*/
this.drawLine = function(dotXY, ops) {
this.ctx.beginPath();
for (var att in ops) this.ctx[att] = ops[att];
dotXY = dotXY.constructor == Object ? [dotXY || { x: 0, y: 0}] : dotXY;
this.ctx.moveTo(dotXY[0].x, dotXY[0].y);
for (var i = 1, len = dotXY.length; i len; i++) this.ctx.lineTo(dotXY[i].x, dotXY[i].y);
this.ctx.stroke();
};
};
window.onload=function(){
var c1 = new MyCanvas();
c1.drawLine([{ x: 10, y: 10 }, { x: 10, y: 200 }],{lineWidth:2,strokeStyle:’rgb(0,0,0)’});
c1.drawLine([{ x: 11, y: 10 }, { x: 11, y: 200 }],{lineWidth:2,strokeStyle:’rgb(255,255,255)’});
c1.drawLine([{ x: 100, y: 10 }, { x: 100, y: 200 }],{lineWidth:1,strokeStyle:’rgb(0,0,0)’}); //普通線
c1.drawLine([{ x: 200.5, y: 10 }, { x: 200.5, y: 200 }],{lineWidth:1,strokeStyle:’rgb(0,0,0)’}); //+0.5偏移
}
/script
/head
body
↓ 處理的↓ 普通的↓ +0.5偏移的br /
/body
/html
HTML5如何通過canvas，把兩張圖片繪製到畫布，然後導出大圖
img src=”…….” id=”img1″ /
img src=”…….” id=”img2″ /
img id=”img3″ /
var img1 = document.getElementById(“img1”),
img2 = document.getElementById(“img2”),
img3 = document.getElementById(“img3”);
var canvas = document.createElement(“canvas”),
context = canvas.getContext(“2d”);
canvas.width = img1.naturalWidth + img2.naturalWidth;
canvas.height = Math.max(img1.naturalHeight,img2.naturalHeight);
// 將 img1 加入畫布
context.drawImage(img1,0,0,img1.naturalWidth,img1.naturalHeight);
// 將 img2 加入畫布
context.drawImage(img1,img2.naturalWidth,0,img2.naturalWidth,img2.naturalHeight);
// 將畫布內容導出
var src = canvas.toDataURL();
img3.src = src;
pdrawImage 的使用方法可以去這裡看一下/p
a href=”” /
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/297990.html
微信掃一掃 
支付寶掃一掃 