带有圆角的HTML5画布 [英] HTML5 Canvas with rounded corner
问题描述
我想要一个带圆角的HTML5画布.我正在使用CSS属性 border-radius:15px
弯角.
I'd like to have an HTML5 canvas with rounded corner. I'm using the CSS property border-radius: 15px
to round my corners.
但是,当我在画布的一角绘制一些东西时,我可以在角上绘制.
But, when I draw something in the corner of my canvas, I can draw in the corner.
开头:
我所拥有的:
我想要什么:
您有什么解决方案可以避免这种情况?我考虑过要制作口罩,但我真的不知道该怎么办.有关信息,这在Firefox上有效,但在Chrome/Safari/Opera上无效.
Do you have any solution to avoid that? I thought about create a mask but I don't really know how to do.. For information, this works on Firefox but not on Chrome/Safari/Opera.
这是一个小例子:
谢谢!
推荐答案
仅在stackoverflow上使用以下示例: https://stackoverflow.com/a/12336233/1312570
Just use this example on stackoverflow: https://stackoverflow.com/a/12336233/1312570
解决方案: http://jsfiddle.net/rzSmw/
Solution: http://jsfiddle.net/rzSmw/
#canvas_container
{
background: #fff;
border: 1px solid #aaa;
border-radius: 15px;
height: 515px;
margin: 20px 20px;
overflow: hidden;
width: 690px;
/* this fixes the overflow:hidden in Chrome/Opera */
-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
}
这篇关于带有圆角的HTML5画布的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!