带圆角的帆布drawimage [英] Canvas drawimage with round corners
问题描述
我在我的网站上使用
<！doctype html>
< html>
< head>
< link rel =stylesheettype =text / cssmedia =allhref =css / reset.css/> < ;! - reset css - >
< script type =text / javascriptsrc =http://code.jquery.com/jquery.min.js>< / script>
< style>
body {background-color：ivory; }
#canvas {border：1px solid red;}
< / style>
< script>
$（function（）{
var canvas = document.getElementById（canvas）;
var ctx = canvas.getContext（2d）;
var img = new Image（）;
img.onload = function（）{
ctx.save（）;
roundedImage（10,10,102,77,10）;
ctx.clip（）;
ctx.drawImage（img，10,10,102,77）;
ctx.restore（）;
}
img.src = https://dl.dropboxusercontent.com/u/139992952/stackoverflow/sky-bg2.jpg;
function roundedImage（x，y，width，height，radius）{
ctx.beginPath（）;
ctx.moveTo（x + radius，y）;
ctx.lineTo（x + width - radius，y）;
ctx.quadraticCurveTo（x +宽度，y，x +宽度，y +半径）;
ctx.lineTo（x +宽度，y +高度 - 半径）;
ctx.quadraticCurveTo（x +宽度，y +高度，x + width - radius，y + height）;
ctx.lineTo（x + radius，y + height）;
ctx.quadraticCurveTo（x，y + height，x，y + height - radius）;
ctx.lineTo（x，y +半径）;
ctx.quadraticCurveTo（x，y，x + radius，y）;
ctx.closePath（）;
}
}）; // end $（function（）{}）;
< / script>
< / head>
< body>
< canvas id =canvaswidth = 300 height = 300>< / canvas>
< / body>
< / html>
I'm using this coverflow script on my website and I don't know how to output the canvas with rounded corners.
This is the code that draws the image
ctx.drawImage(image, cropLeft, cropTop, wid-2*cropLeft, hei-2*cropTop, 0, 0, newWidth, newHeight);
I read some tutorials using arc() or arcTo() functions but none of them we're using an image as object.
UPDATE1: I see that drawimage() has only the following parameters for drawing: • Images the same size and composition as the original • Images that are resized from the original • Images that are cropped from the original
So, I guess, it's not possible to draw images with rounded corners through canvas..
You can use context.clip() to draw an image that's clipped inside a rounded rectangle
First draw a rectangle with rounded corners (no need to stroke or fill):
// draw a rounded rectangle
ctx.beginPath();
ctx.moveTo(x + radius, y);
ctx.lineTo(x + width - radius, y);
ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
ctx.lineTo(x + width, y + height - radius);
ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
ctx.lineTo(x + radius, y + height);
ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
ctx.lineTo(x, y + radius);
ctx.quadraticCurveTo(x, y, x + radius, y);
ctx.closePath();
Then call context.clip which will cause all future drawings to be clipped inside the rect
ctx.clip();
Finally, draw your image inside that rectangle and your image will be clipped round.
ctx.drawImage(img,10,10,102,77);
Here is example code and a Fiddle: http://jsfiddle.net/m1erickson/FLaee/
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; }
#canvas{border:1px solid red;}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var img=new Image();
img.onload=function(){
ctx.save();
roundedImage(10,10,102,77,10);
ctx.clip();
ctx.drawImage(img,10,10,102,77);
ctx.restore();
}
img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/sky-bg2.jpg";
function roundedImage(x,y,width,height,radius){
ctx.beginPath();
ctx.moveTo(x + radius, y);
ctx.lineTo(x + width - radius, y);
ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
ctx.lineTo(x + width, y + height - radius);
ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
ctx.lineTo(x + radius, y + height);
ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
ctx.lineTo(x, y + radius);
ctx.quadraticCurveTo(x, y, x + radius, y);
ctx.closePath();
}
}); // end $(function(){});
</script>
</head>
<body>
<canvas id="canvas" width=300 height=300></canvas>
</body>
</html>
这篇关于带圆角的帆布drawimage的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
