如何在此代码中更改ctx fillystyle？ [英] How can I change ctx fillystyle in this code?
本文介绍了如何在此代码中更改ctx fillystyle？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
Js fiddle [ ]
如何将图像设置为此ctx？如你所见它只有颜色作为fillstyle。但我想把图像放在那里。
我该怎么办？
我尝试了什么：
var bigGreen = new BigCircle（ctx，50,50，'＃5eb62b'，50）;
我尝试将图片网址设置为函数参数：
var bigGreen = new BigCircle（ctx，50,50，'url （myimage.png）'，50）;
无效。
Js fiddle[]
How can I set an image into this ctx? As you see it has only colors as fillstyle. But I would like to put image over there.
What should I do?
What I have tried:
var bigGreen = new BigCircle(ctx,50, 50, '#5eb62b', 50);
I tried put image url to function argument:
var bigGreen = new BigCircle(ctx,50, 50, 'url("myimage.png")', 50);
Not working.
推荐答案
< html>
< body>
< canvas id =canvaswidth =500height =100>
画布不支持！
< / canvas>
< / body>
< / html>
BigCircle = function（ctx，x， y，color，circleSize）{
ctx.beginPath（）;
ctx.arc（x，y，circleSize，0，Math.PI * 2，true）;
ctx.fillStyle = color
ctx.fill（）;
ctx.closePath（）;
this .clicked = function（）{
ctx.fillStyle ='＃ff0000'
ctx.fill（）;
}
};
canvas.width = 903;
canvas.height = 657;
var background = new Image（）;
background.src =http://i.imgur.com/yf6d9SX.jpg;
函数init（）{
var canvas = document.getElementsByTagName（canvas）[0];
var ctx = canvas .getContext（'2d'）;
var bigGreen = new BigCircle（ctx，50,50，'＃5eb62b'，50）;
<html>
<body>
<canvas id="canvas" width="500" height="100">
Canvas not supportet!
</canvas>
</body>
</html>
BigCircle = function(ctx,x, y, color, circleSize) {
ctx.beginPath();
ctx.arc(x, y, circleSize, 0, Math.PI * 2, true);
ctx.fillStyle=color
ctx.fill();
ctx.closePath();
this.clicked=function(){
ctx.fillStyle='#ff0000'
ctx.fill();
}
};
canvas.width = 903;
canvas.height = 657;
var background = new Image();
background.src = "http://i.imgur.com/yf6d9SX.jpg";
function init() {
var canvas = document.getElementsByTagName("canvas")[0];
var ctx = canvas.getContext('2d');
var bigGreen = new BigCircle(ctx,50, 50, '#5eb62b', 50);
（'＃canvas'）。点击（功能（e）{
var x = e.clientX
，y = e.clientY
if（Math.pow（x-50,2）+ Math.pow（y-50,2）< Math.pow（50,2））
bigGreen.clicked（）
ctx.drawImage（background，0,0）;
}）
}
('#canvas').click(function(e){
var x = e.clientX
, y = e.clientY
if(Math.pow(x-50,2)+Math.pow(y-50,2) < Math.pow(50,2))
bigGreen.clicked()
ctx.drawImage(background,0,0);
})
}
（文件）.ready（function（）{
init（）;
}）;
(document).ready(function() {
init();
});
这篇关于如何在此代码中更改ctx fillystyle？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
