canvasで画像にイベントを加えたいのですが、
Uncaught An error has occurred. This is most likely due to security restrictions on reading canvas pixel data with local or cross-domain images.
のエラーが出てしまって、イベントが処理できません。
クロスドメイン画像を使っているわけでもないのですが…
やはり、ローカルでサーバを立てないといけないのでしょうか。
原因が知りたいです。
ちなみにコードは以下の感じです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>sample4</title>
<script>
var createjs = window; //省いて記述できるようにするため
</script>
<script src="Ease/lib/easeljs-0.8.1.min.js"></script>
<script src="Tween/lib/tweenjs-0.6.1.min.js"></script>
<script src="Preload/lib/preloadjs-0.6.1.min.js"></script>
<script type="text/javascript">
var stage;
function initialize() {
var canvasElement = document.getElementById("myCanvas");
stage = new Stage(canvasElement);
for(var i = 0; i < 2; i++) {
var myShape = createCircle(50 * (i + 1), 50, 20);
myShape.addEventListener("mousedown",startDrag);
stage.addChild(myShape);
}
stage.update();
}
function createCircle(nX, nY, nRadius) {
var myShape = new Shape();
myShape.x = nX;
myShape.y = nY;
draw(myShape.graphics, nRadius);
return myShape;
}
function draw(myGraphics, nRadius) {
var randomNumber = Math.floor(Math.random() * 0xFFFFFF);
var randomColor = Graphics.getRGB(randomNumber);
myGraphics.beginStroke("blue");
myGraphics.beginFill(randomColor);
myGraphics.drawCircle(0, 0, nRadius);
}
function startDrag(eventObject) {
var instance = eventObject.target;
instance.addEventListener("pressmove", drag); //マウスを動かす
instance.addEventListener("pressup", stopDrag);//マウスボタンをはなす
instance.dispatcher = eventObject;
//インスタンスが円、イベントオブジェクトがマウス
instance.offset = new Point(instance.x - eventObject.stageX, instance.y - eventObject.stageY);
}
function drag(eventObject) {
var instance = eventObject.target;
var offset = instance.offset;
instance.x = eventObject.stageX + offset.x;//インスタンスの基準点とのずれ
instance.y = eventObject.stageY + offset.y;
stage.update();
}
function stopDrag(eventObject) {
var dispatcher = eventObject.target;
dispatcher.removeEventListener("pressmove", drag);
dispatcher.removeEventListener("pressup", stopDrag);
}
</script>
<style>
</style>
</head>
<body onload="initialize()">
<canvas id="myCanvas" width="240" height="280"></canvas>
</body>
</html>
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。