| 開発環境 |
メモ帳 |
| 実行環境 |
Internet Explorer 11 |
canvas.html
<!doctype html>
<head>
<title>canvas</title>
</head>
<body>
<button onclick="draw('sample.png')">draw</button>
<button onclick="reverse()">reverse</button>
<br>
<canvas id="canvas"></canvas>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
function draw(filename)
{
var img = new Image();
img.src = filename + "?" + Date.now();
img.onload = function() {
canvas.width = img.width; // natural
canvas.height = img.height;
ctx.drawImage(img, 0, 0);
}
}
function reverse()
{
var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
var data = imageData.data;
for (var i = 0; i < data.length; i += 4) {
var r = data[i+0];
var g = data[i+1];
var b = data[i+2];
var a = data[i+3];
data[i+0] = 0xff - r;
data[i+1] = 0xff - g;
data[i+2] = 0xff - b;
}
ctx.putImageData(imageData, 0, 0);
}
</script>
</body>
最終更新：2014年09月08日 20:42
