用图片填充HTML5弧 - HTML5 Canvas [英] Fill HTML5 arc with a picture - HTML5 Canvas
本文介绍了用图片填充HTML5弧 - HTML5 Canvas的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个HTML5画布( JSFiddle )看起来像:
I have a HTML5 Canvas (JSFiddle) that looks like:
我通过以下方法创建球:
I am creating the balls by the following method:
function createball(x,y,r,color){
context.beginPath();
context.arc(x,y,r,0,Math.PI*2,true);
context.fillStyle = color;
context.fill();
}
如何用图像填充球?我的意思是一个可能有图案或一些自然色的图像?
How can I fill the ball with image? I mean a image that might have patters or some natural color?
推荐答案
您可以创建一个模式并将球的fillStyle设置为该模式
You could create a pattern and set the ball's fillStyle to that pattern
这是示例代码和演示:
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
var img=new Image();
img.onload=start;
img.src="https://dl.dropboxusercontent.com/u/139992952/multple/checkerboard.jpg";
function start(){
var pattern=ctx.createPattern(img,'repeat');
ctx.beginPath();
ctx.arc(50,50,15,0,Math.PI*2);
ctx.closePath();
ctx.fillStyle=pattern;
ctx.fill();
ctx.stroke();
}
body{ background-color: ivory; }
#canvas{border:1px solid red;}
<h4>Source Image:</h4>
<img src='https://dl.dropboxusercontent.com/u/139992952/multple/checkerboard.jpg'>
<h4>Fill Circle with pattern made from source image</h4>
<canvas id="canvas" width=100 height=100></canvas>
这篇关于用图片填充HTML5弧 - HTML5 Canvas的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文