こんにちは、ももこです。 HTML5の新要素であるCanvasを使って、グレースケールのマウスオーバーを実現するチュートリアルをご紹介します! 現在CanvasはFirefox/Chrome/Safari/Operaなど殆どのブラウザの最新版で実装されています。 ■DEMOを表示 Javascript <script> $(window).load(function() { $('#gallery img').each(function() { createCanvas(this); }); function createCanvas(image) { var canvas = document.createElement('canvas'); if (canvas.getContext) { var ctx = canvas.getContext("2d"); // キャンバスサイズを指
![画像不要!HTML5のCanvasでグレースケールのマウスオーバーが作れるチュートリアル | 株式会社LIG(リグ)|DX支援・システム開発・Web制作](https://cdn-ak-scissors.b.st-hatena.com/image/square/314ca430dfd53b88f4d725786890dd0a0e613343/height=288;version=1;width=512/https%3A%2F%2Fliginc.co.jp%2Fwp-content%2Fuploads%2F2012%2F10%2Fimg.jpg)