这是我正在使用的代码当我有image.src = "/local/directory/image.png"工作,但如果我使用image.src="http://remote/path"它加载图像但休息mousemove功能不起作用.你是如何解决的？
复制并粘贴到test.htm
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script>
$(document).ready(function()
{
var image = new Image();
var ctx = $('#canvas')[0].getContext("2d");
image.src = "http://www.google.com/intl/en_com/images/srpr/logo3w.png";
//image.src = "/agents/google.png";
image.width="340";
image.height="220";
image.onload = function ()
{
ctx.drawImage(image, 0, 0, image.width, image.height);
}
$('#canvas').mousemove(function(e)
{
var canvasOffset = $(this).offset();
var canvasX = Math.floor(e.pageX - canvasOffset.left);
var canvasY = Math.floor(e.pageY - canvasOffset.top);
var imageData = ctx.getImageData(canvasX, canvasY, 1, 1);
var pixel = imageData.data;
var pixelColor = "rgba("+pixel[0]+", "+pixel[1]+", "+pixel[2]+", "+pixel[3]+")";
$(document.body).css('background-color',pixelColor);
}); …我在画布上绘制了多个图像，但我希望用户能够定义图像的重叠。换句话说，用户选择出现在前面的图像和出现在后面的图像。我怎么能做到这一点？
我有一个问题让我的KineticJS动画停止().
我在同一层上有三个KineticJS图像对象,我已经为每个KineticJS图像对象添加了一个KineticJS动画.但是,只有一个图像对象显示任何动画.它也不会停止响应anim.stop()的动画,除非我停止()所有三个对象(包括那些实际上没有视觉动画的动画)的动画.
我的问题是:是否可以在单个图层上添加多个独立动画到单个图层,并且仍能够单独启动()/停止()每个动画？或者我是否需要为每个KineticJS图像对象创建单独的图层？
简而言之(黑客版本),我的代码如下:
stage = new Kinetic.Stage({container: "container", width: windowWidth, height: windowHeight});
layer = new Kinetic.Layer();
var kinObjArr = [];
for (var i=0; i < 3; i++) {
kinObjArr[i] = new Kinetic.Image({image: myHTMLImage});
kinObjArr[i].anim = new Kinetic.Animation({
func: function(frame) {
kinObjArr[i].setX(30 * Math.sin(frame.time * 2 * Math.PI / 500) + 100);
},
node: layer
});
kinObjArr[i].anim.start();
kinObjArr[i].on('touchstart', function(){
this.anim.stop(); // <----- Doesn't stop
layer.draw();
});
} // for
stage.add(layer);
基本上只有列表中的最后一个KineticJS图像将被动画化,并且只有在触摸/点击所有3个图像时才能停止它.
我很难重置/清除画布的内容.我目前正在使用:Sketch.js插件生成一个自由格式的画布.它完全符合我的需要,但它似乎没有一个简单的画布'重置'函数调用来清除内容.
jsfiddle:http: //jsfiddle.net/k7fmq/
注意:我读到'宽度'方法在chrome中不起作用,并且这两种方法似乎都不适用于'自由形式'画布,但仅适用于我没有测试过的形状.
这是我到目前为止所尝试的:
标记
<div class="signature-field">
Signature:
<span class="sketch-container">
<canvas style="border:1px solid grey; border-radius:7px;" id="simple_sketch" width="400" height="150"></canvas>
<span class="save-signature">Save Signature</span>
<span class="reset-canvas">Reset Canvas</span>
</span>
Date: <input type="text"><br/><br/>Name: <input type="text">
</div>
JQuery(我的最新尝试)
$('.reset-canvas').click(function() {
var myCanvas = document.getElementById("#simple_sketch");
var width = myCanvas.width;
myCanvas.width = width + 1;
});
方法2:
$('.reset-canvas').click(function() {
canvas.width = canvas.width;
});
方法3:
$('.reset-canvas').click(function() {
var myCanvas = document.getElementById("simple_sketch");
var ctx = myCanvas.getContext('2d');
ctx.clearRect(0, 0, myCanvas.width, myCanvas.height);
});
这是我的代码：
<!DOCTYPE html>
<html>
<head>
<!-- Load the Paper.js library -->
<script type="text/javascript" src="paper.js"></script>
<!-- Define inlined PaperScript associate it with myCanvas -->
<script type="text/paperscript" canvas="myCanvas">
// Create a Paper.js Path to draw a line into it:
var path = new Path();
// Give the stroke a color
path.strokeColor = 'black';
var start = new Point(100, 100);
// Move to start and draw a line from there
path.moveTo(start);
// Note the plus operator on Point objects.
// PaperScript does that …如何计算在圆心内绘制正方形的起始坐标？
功能绘制圆形光谱。现在帮助我找到在圆内绘制矩形的起始坐标
Gradient.prototype.renderSpectrum = function() {
var radius = this.width / 2;
var toRad = (2 * Math.PI) / 360;
var step = 1 / radius;
this.ctx.clearRect(0, 0, this.width, this.height);
for(var i = 0; i < 360; i += step) {
var rad = i * toRad;
this.ctx.strokeStyle = 'hsl(' + i + ', 100%, 50%)';
this.ctx.beginPath();
this.ctx.moveTo(radius, radius);
this.ctx.lineTo(radius + radius * Math.cos(rad), radius + radius * Math.sin(rad));
this.ctx.stroke();
}
this.ctx.fillStyle = 'rgb(255, 255, 255)';
this.ctx.beginPath();
this.ctx.arc(radius, radius, radius …如何将鼠标滑动到圆形？在画布中绘制圆弧和鼠标指针.鼠标应该在圆形路径上拖拽山墙？
//function to create mouse event to drag the mouse hover the arc
function mousedrag() {
var canvasoffset = $(this.canvas).offset();
var offsetX = canvasoffset.left;
var offsetY = canvasoffset.top;
var mouseX = parseInt(e.offsetX || e.clientX - offsetX);
var mouseY = parseInt(e.offsetY || e.clientY - offsetY);
var radius = this.width / 2;
var twoPI = 2 * Math.PI;
var toRad = twoPI / 360;
var r_width = this.width * 0.8;
var radial_Angle = Math.atan2(mouseY - radius,mouseX - radius);
var p_side_x = radius …我正在绘制一个大的画布图像作为背景，该图像大于窗口大小。我想知道是否有办法将图像居中放置在全屏上。如果是这样，怎么办？这就是我在做什么：
var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d');
window.addEventListener('resize', resizeCanvas, false);
function resizeCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
drawStuff();
}
resizeCanvas();
function drawStuff() {
var imageObj = new Image();
imageObj.onload = function() {
context.drawImage(imageObj, 69, 50);
};
imageObj.src = '/resources/img/bg.png';
}
我似乎无法在画布上进行第二次剪辑调用。请参见小提琴：http : //jsfiddle.net/m2hL17nu/ 注意第一个径向渐变是如何裁剪的，而第二个则不是。
我见过HTML画布中可以有多个剪切区域吗？但是保存还原似乎仍然无法使下一个clip（）工作。
在此先感谢您的帮助。参见下面的代码：
var x1 = 300,
y1 = 100,
x2 = 50,
y2 = 50,
r = 20;
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
function createRadialGradient (xa, ya, xb, yb, r) {
var grd = context.createRadialGradient(xa, ya, 0, xb, yb, r);
grd.addColorStop(0, 'rgba(0,0,0,1)');
grd.addColorStop(1, 'rgba(0,0,0,0)');
context.fillStyle = grd;
context.fill();
}
context.save();
context.rect(x1-r,y1-r,r,r);
context.clip();
context.rect(0, 0, canvas.width, canvas.height);
createRadialGradient(x1, y1, x1, y1, r);
context.restore();
context.save();
context.rect(x2-r,y2,r,r);
context.strokeStyle = 'black';
context.clip();
context.rect(0, 0, …我发现这个网站的主页效果非常酷.如何创建这些动画效果？这些效果是否需要额外的插件？
谢谢