[英]How to add an image in HTML5 Ball Pool
As topic, how can i add an image in the web page be the one of these ball 作为主题,我如何在网页中添加图像成为其中之一
And crop the image to be circle like the profile picture of Instagram 并像Instagram的头像一样将图像裁剪为圆形
Demo: Ball Pool - Mr.doob 演示: 球池-Mr.doob
You can use context.clip
to accomplish clipping an image within a circle 您可以使用
context.clip
在一个圆圈内完成图像的裁剪
context.clip()
creates a clipping path where any new drawings will only be drawn only inside the defined path. context.clip()
创建一个剪切路径,在该剪切路径中,仅在定义的路径内才绘制任何新图形。 Any drawings that fall outside the clipping path will not show. 不在剪切路径之外的任何图形都不会显示。
Here's how: 这是如何做:
Define an circular path. 定义一个圆形路径。
Create a clipping path from the circular path. 从圆形路径创建剪切路径。
Draw the image and it will be clipped within the circular clipping region. 绘制图像,它将被剪切在圆形剪切区域内。
Illustrating code: 说明代码:
// define a path
context.beginPath();
context.arc(100,100,75,0,Math.PI*2);
context.closePath();
context.stroke(); // the stroke is optional
// clip new drawings within this path
context.clip();
// draw the image
// Note: adjust the x,y of drawImage to "frame" your image as desired
context.drawImage(anyImageObject,100-75,100-75);
Here's an example of an image clipped inside an animated circle: 这是一个在动画圆中裁剪的图像的示例:
http://jsfiddle.net/m1erickson/255JU/ http://jsfiddle.net/m1erickson/255JU/
Example code: 示例代码:
<!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");
// ball related variables
var x=50;
var y=100;
directionX=3;
directionY=2;
var radius=32;
var offsetX=-37;
var offsetY=-34;
var angle=0;
// the image to be clipped inside the ball
var img=new Image();
img.onload=start;
img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/facesSmall.png";
function start(){
// start the animation
animate();
}
function drawBall(x,y,radius,img,imgOffsetX,imgOffsetY,radianAngle){
// create a stroked circle at x,y and rotated by radianAngle
ctx.save();
ctx.beginPath();
ctx.translate(x,y);
ctx.rotate(radianAngle);
ctx.arc(0,0,radius,0,Math.PI*2);
ctx.closePath();
ctx.stroke();
// make the circle a clipping region
ctx.clip();
// draw the image into the clipping region
// (only part of the image will show--the part inside the circle
ctx.drawImage(img,imgOffsetX,imgOffsetY);
// restore the context to its original untranslated/unrotated state
ctx.restore();
}
function animate(){
// request another animation frame
requestAnimationFrame(animate);
// clear the canvas
ctx.clearRect(0,0,canvas.width,canvas.height);
// draw the ball
drawBall(x,y,radius,img,offsetX,offsetY,angle);
// increment the x,y position of the ball
x+=directionX;
if(x<radius || x>canvas.width-radius){directionX*=-1; x+=directionX;}
y+=directionY;
if(y<radius || y>canvas.height-radius){directionY*=-1; y+=directionY;}
// increment the angle of the ball
angle+=Math.PI/90;
}
}); // end $(function(){});
</script>
</head>
<body>
<p>Animated ball with image clipped inside</p>
<canvas id="canvas" width=300 height=300></canvas>
<p>The original image is below</p>
<img src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/facesSmall.png">
</body>
</html>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.