entityMap|blocks|key|ar75i|text|你能详细说明我们的要求吗？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|18t38|您不能设置将直接从画布绘制的图像的背景颜色。如果更改颜色，它将反映在源图像中。|cc3ta|您必须从源元素中创建它。如果你想用一些颜色填充方框大小，你可以在绘制之前使用ctx的fillStyle。|offset|length|style|CODE|6uj48^0|0|0|16|9|0^^$0|$]|1|@$2|3|4|5|6|7|8|L|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|M|9|@]|A|@]|B|$]]|$2|E|4|F|6|7|8|N|9|@$G|O|H|P|I|J]]|A|@]|B|$]]|$2|K|4|-4|6|7|8|Q|9|@]|A|@]|B|$]]]]

Can you specify more about our requirement?

You can not set the background colour of an image which is going to draw directly from the canvas. if you altering a color, it will reflect in the source image.

You have to make it from the source element. If you want to fill the box size with some color, you could use <code>fillStyle</code> of the ctx before draw.

entityMap|0|type|LINK|mutability|MUTABLE|data|url|https://www.w3schools.com/graphics/tryit.asp?filename=trycanvas_image|blocks|key|7ikhk|text|看看w3schools上的示例，它将引导您开始如何加载图像并将其复制到画布中。如果您不需要在页面上显示原始图像，那么将'style="display:none;"‘添加到img标记中。要对图像进行着色，可以看看globalAlpha与填充的矩形的组合-沿着这些线的东西：|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|90fvc|window.onload+=+function()+{
++++var+canvas+=+document.getElementById("myCanvas");
++++var+ctx+=+canvas.getContext("2d");
++++var+img+=+document.getElementById("scream");

++++ctx.globalAlpha+=+0.5;
++++ctx.beginPath();
++++ctx.rect(0,+0,+canvas.width,+canvas.height);
++++ctx.fillStyle+=+"#ff0000";
++++ctx.fill();

++++ctx.drawImage(img,+10,+10);
};|code-block|syntax|javascript|9ilgd^0|2|9|0|0|0^^$0|$1|$2|3|4|5|6|$7|8]]]|9|@$A|B|C|D|2|E|F|Q|G|@]|H|@$I|R|J|S|A|T]]|6|$]]|$A|K|C|L|2|M|F|U|G|@]|H|@]|6|$N|O]]|$A|P|C|-4|2|E|F|V|G|@]|H|@]|6|$]]]]

Have a look at the example here on <a href="https://www.w3schools.com/graphics/tryit.asp?filename=trycanvas_image" rel="nofollow noreferrer">w3schools</a> that will get you started on how to load the image and copy it into the canvas. If you don't need the original image to be shown on the page then add 'style="display:none;"' to the img tag. To tint the image have a look at globalAlpha in combination with a filled rect - something along these lines:

<pre><code>window.onload = function() {
 var canvas = document.getElementById("myCanvas");
 var ctx = canvas.getContext("2d");
 var img = document.getElementById("scream");

 ctx.globalAlpha = 0.5;
 ctx.beginPath();
 ctx.rect(0, 0, canvas.width, canvas.height);
 ctx.fillStyle = "#ff0000";
 ctx.fill();

 ctx.drawImage(img, 10, 10);
};
</code></pre>

entityMap|blocks|key|ii9s|text|画布不会渲染css，无论您使用哪种css作为图像，它都会渲染普通图像，除非您自己绘制边框或背景|type|unstyled|depth|inlineStyleRanges|entityRanges|data|6jnhg^0|0^^$0|$]|1|@$2|3|4|5|6|7|8|D|9|@]|A|@]|B|$]]|$2|C|4|-4|6|7|8|E|9|@]|A|@]|B|$]]]]

Canvas do not render css no matter what css you use for image it will always render plain image unless you draw border or background by yourself

entityMap|blocks|key|bcks4|text|通过分析绘制图像的每个像素，然后用所需的颜色覆盖1x1矩形，可以覆盖绘制在画布上的图像。以下是如何执行此操作的示例：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|c4vj0|function+overlayColor(img,x,y,a,r,g,b,drawWidth,drawHeight){
++++//create+a+canvas+in+memory+and+draw+the+image+there+to+analyze+it
++++var+tmpCanvas+=+document.createElement('canvas');
++++var+context+=+tmpCanvas.getContext('2d');
++++tmpCanvas.width+=+drawWidth;
++++tmpCanvas.height+=+drawHeight;
++++context.drawImage(img,0,0,drawWidth,drawHeight);
++++let+pData+=+new+Array();
++++for+(let+i+=+0;+i+<+tmpCanvas.width;+i%2B%2B){
++++++++for+(let+j+=+0;+j+<+tmpCanvas.height;+j%2B%2B){
++++++++++++if+(context.getImageData(i,+j,+1,+1).data[3]+!=+0){//if+the+pixel+is+not+transparent+then+add+the+coordinates+to+the+array
++++++++++++++++pData.push([i,j]);
++++++++++++}
++++++++}
++++}
++++//then+every+pixel+that+wasn't+transparent+will+be+overlayed+with+a+1x1+rectangle+of+the+inputted+color+
++++//drawn+at+the+(x,y)+origin+which+was+also+given+by+the+user
++++//this+uses+ctx,+the+context+of+the+canvas+visible+to+the+user
++++ctx.fillStyle="rgba("+%2B+r+%2B+","+%2B+g+%2B+","+%2B+b+%2B+","+%2B+a+%2B+")";
++++for+(let+i+=+0;+i+<+pData.length;+i%2B%2B){
++++++++ctx.fillRect(x+%2B+pData[i][0],y+%2B+pData[i][1],1,1);
++++}

}|code-block|syntax|javascript|fn19q|由于该函数采用x和y值，因此用户给出的图像将被分析并仅覆盖在用户给出的坐标处不透明的像素上，同时还给出了RGBA值。我发现这个过程可能会导致一些延迟，但是可以通过保存pData数组并使用函数的后半部分在屏幕上再次绘制该数组来克服这个问题。|fq1gm^0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|K|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|L|9|@]|A|@]|B|$F|G]]|$2|H|4|I|6|7|8|M|9|@]|A|@]|B|$]]|$2|J|4|-4|6|7|8|N|9|@]|A|@]|B|$]]]]

It is possible to overlay the image drawn on a canvas by analyzing each pixel of the drawn image and then overlaying a 1x1 rectangle with the desired color. Here is an example of how to do so:

<pre><code>function overlayColor(img,x,y,a,r,g,b,drawWidth,drawHeight){
 //create a canvas in memory and draw the image there to analyze it
 var tmpCanvas = document.createElement('canvas');
 var context = tmpCanvas.getContext('2d');
 tmpCanvas.width = drawWidth;
 tmpCanvas.height = drawHeight;
 context.drawImage(img,0,0,drawWidth,drawHeight);
 let pData = new Array();
 for (let i = 0; i &lt; tmpCanvas.width; i++){
 for (let j = 0; j &lt; tmpCanvas.height; j++){
 if (context.getImageData(i, j, 1, 1).data[3] != 0){//if the pixel is not transparent then add the coordinates to the array
 pData.push([i,j]);
 }
 }
 }
 //then every pixel that wasn't transparent will be overlayed with a 1x1 rectangle of the inputted color 
 //drawn at the (x,y) origin which was also given by the user
 //this uses ctx, the context of the canvas visible to the user
 ctx.fillStyle="rgba(" + r + "," + g + "," + b + "," + a + ")";
 for (let i = 0; i &lt; pData.length; i++){
 ctx.fillRect(x + pData[i][0],y + pData[i][1],1,1);
 }

}
</code></pre>

Since the function takes an x and y value the image given by the user will be analyzed and overlayed only on pixels that are not transparent at the coordinate given by the user with the rgba value also given. I have found that this process can result in some lag but it could be overcome by saving the pData array and using the second half of the function to draw the array on screen again.

When I try to draw an image on a canvas with a pre-loaded image with css like:

<pre><code>img.style.backgroundColor="red";
ctx.drawImage(img,0,0,100,100);
</code></pre>

I find that the image is being drawn as it would appear without the css. Do HTML canvases support css? If not is there a way to overlay a png with transparency with a color only on the pixels that are not transparent?

HTML 5 canvas drawing image not showing css

 当我尝试在画布上绘制一个带有css预加载图像的图像时，如下所示： img.style.backgroundColor="red";ctx.drawImage(img,0,0,100,100); 我发现在没有css的情况下，图像是按照原来的样子绘制的。HTML画布支持css吗？如果不是，有没有办法只在不透明的像素上用一...

问HTML 5画布绘图图像未显示css
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML 5画布绘图图像未显示cssEN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML 5画布绘图图像未显示css
EN