本文目录一览：
- 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="" /
