Question

var device = false;
var a0 = (device? 'rgba(0,169,157,0.6)' : {darker: 'rgba(0,122,133,1)', start: 'rgba(67,192,183,0)', end: 'rgba(0,169,157,1)', angle: 156.1});
var a1 = (device? 'rgba(41,171,226,0.6)' : {darker: 'rgba(1,101,166,1)', start: 'rgba(21,131,196,1)', end: 'rgba(132,207,238,.1)', angle: 180-11.1});
var a2 = (device? 'rgba(200,200,200,0.6)' : {darker: 'rgba(120,120,120,0.4)', start: 'rgba(90,90,90,1)', end: 'rgba(80,80,80,0.4)', angle: 245});

我刚开始画布上的东西。

所以我有这些线来改变我在画布上的圆圈的颜色。但是我想要在其中添加图像，而不是这些颜色，最好是作为背景图像或其他东西。是否有可能实现这一目标？

Answer 1

我不确定我是否理解你的问题，但

（这仅适用于html5 canvas：http://shedlimited.debrucellc.com/）

html5 canvas + kinetic.js这样做 - ＆gt;

http://jsfiddle.net/aqaP7/4/

（可拖动的圆圈依赖于同时设置的HTML5裁剪约束）

 // draw clipping rectangle
                    context.beginPath();
                    context.rect(box._x, box._y, 200, 100);
                    context.clip();

                    // draw circle
                    context.beginPath();
                    context.arc(this._x, this._y, 50, 0, 2 * Math.PI, false);
                    context.fillStyle = "blue";
                    context.fill();
                    context.closePath();
                },

如果您想在那里绘制背景图像，您可以同时绘制图像

将背景图像设置为Canvas元素或将图像放入其中

1 个答案: