html画布图通过显示 [英] html canvas drawing shows through

问题描述

我想确认这个问题是否已经被问到。通过在顶部绘制另一个白色矩形来擦除黑色矩形的一部分，但是很多原始黑色矩形显示通过，就好像它被平均化一样：

  canvas = document.getElementById（'canvas'）; 
 context = canvas.getContext（'2d'）; 
 context.globalAlpha = 1; 
 context.globalCompositeOperation ='source-over'; 
 context.strokeStyle ='rgba（0,0,0,1）'; 
 context.strokeRect（10,20,20,30）; 
 context.strokeStyle ='rgba（250,250,250,1）'; 
 context.strokeRect（20,20,10,30）; 
  

基本上，你绘制一个圆形像素数字上有一个1px宽边框的矩形，这意味着浏览器试图绘制半像素。您应该将位置设置为某个.5以避免此问题：

http://jsfiddle.net/VdGa6/2/

  canvas = document.getElementById （'帆布'）; 
 context = canvas.getContext（'2d'）; 
 // context.globalAlpha = 1; //这是默认的，所以不需要
 // context.globalCompositeOperation ='source-over'; //这是默认值，所以不需要
 context.strokeStyle ='rgba（0,0,0,1）'; 
 context.strokeRect（10.5,20.5,20,30）; 
 context.strokeStyle ='rgba（250,250,250,1）'; 
 context.strokeRect（20.5,20.5,10,30）; 
  

I'm sure this question has been asked before I just can't find an answer to it yet.

I want to erase part of a black rectangle by drawing another, white rectangle on top, but a lot of the original black rectangle shows through as if it is being averaged:

canvas = document.getElementById('canvas');
context = canvas.getContext('2d');
context.globalAlpha = 1;
context.globalCompositeOperation = 'source-over';
context.strokeStyle = 'rgba(0,0,0,1)';
context.strokeRect(10,20,20,30);
context.strokeStyle = 'rgba(250,250,250,1)';
context.strokeRect(20,20,10,30);

js fiddle here What I want to see is a single black C on the left and an almost white rectangle next to it. Instead I see the single black C, a grey reverse C and the almost white line in between the two:

解决方案

At first I thought it's because the box isn't black at all, instead it looks gray and with a little bit of alpha. So, after some googling I found this: Why isn't rectangle black in HTML 5 canvas?

basically, you draw you rectangle with a 1px wide border on a round pixel number, this means that the browser tries to draw on a half pixel. You should set the position to something .5 in order to avoid this problem:

http://jsfiddle.net/VdGa6/2/

canvas = document.getElementById('canvas');
context = canvas.getContext('2d');
// context.globalAlpha = 1;  // this is the default so it's not needed
// context.globalCompositeOperation = 'source-over';  // this is the default so it's not needed
context.strokeStyle = 'rgba(0,0,0,1)';
context.strokeRect(10.5,20.5,20,30);
context.strokeStyle = 'rgba(250,250,250,1)';
context.strokeRect(20.5,20.5,10,30);

这篇关于html画布图通过显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！