画像のスケーリング、反転、色のグラデーションを実装するための HTML5 Canvas コード例

画像のスケーリング、反転、色のグラデーションを実装するための HTML5 Canvas コード例_html5 チュートリアルスキル

WBOY

リリース： 2016-05-16 15:46:00

オリジナル

2631 人が閲覧しました

反転、移動、パン、ズームイン、ズームアウト

XML/HTML コードコンテンツをクリップボードにコピー

var canvas = document.getElementById('canvas');
if (canvas.getContext) {
var context = canvas.getContext('2d');
// 放大与缩小
context.beginPath();
context.ストロークスタイル = "#000000";
context.ストロークRect(10,10,150,100);
// 放大3倍
context.scale(3,3);
context.beginPath();
context.ストロークスタイル = '#cccccc';
context.ストロークRect(10,10,150,100)
// 缩小
context.scale(0.5,0.5);
context.beginPath();
context.ストロークスタイル = '#cccccc';
context.ストロークRect(10,10,150,100)
// 翻转
var img = new Image();
img.src = 'images/1.jpg';
img.onload = 関数(){
context.drawImage(img, 10,10);
context.scale(1, -1);
context.drawImage(img, 0, -500);
}
// 平移
context.beginPath();
context.ストロークスタイル = '#000000';
context.ストロークRect(10,101,150,100);
// x移動 50 y 移動100
context.translate(50,100);
context.beginPath();
context.ストロークスタイル = '#cccccc';
context.ストロークRect(10,10,150,100);
// 旋转
context.beginPath();
context.ストロークスタイル = '#000000';
context.ストロークRect(200,50,100,50);
// 回転は 0,0 中心に基づいて、translate を使用して自分の配置に合わせた中心回転です
context.translate(250,75);
context.rotate(45 * Math.PI /180);
context.translate(-250, -75);
context.beginPath();
context.ストロークスタイル = '#cccccc';
context.ストロークRect(200,50,100,50);
// 変換四角阵
context.beginPath();
context.ストロークスタイル = '#000000';
context.ストロークRect(10,10,150,100);
context.transform(3,0,0,3,0,0);
context.beginPath();
context.ストロークスタイル = '#cccccc';
context.ストロークRect(10,10,150,100);
}

渐变、图像组合效果、颜色翻转

XML/HTML コード复制コンテンツ到剪贴板

var canvas = ドキュメント.getElementById('canvas'); >
context = canvas.getContext('2d'); // 線形描画グラデーション
var
= context.createLinearGradient(0,0,200,100); // 位置は 0.1 ～ 1.0 の間の垂直方向である必要があり、グラデーション内の色の相対位置を示します。color は色を表します
context.fillStyle
grd; context.fillRect(0,0, 200,100); // 放射状グラデーション
grd
context
grd.addColorStop(0.1, "#00ff00"); grd.addColorStop(0.8, '#ff0000');
=
;
// 画像合成効果 context.fillStyle
'#00ff00'
context.fillRect(10,10,50,50);
// 新規描画 //context.globalCompositeOperation =
;
context.globalCompositeOperation = 'コピー'; // グラフィックスが重なっている場合、色の値が減算されて
= '暗い'; // キャンバス上にすでにあるコンテンツは、他のグラフィックスと重なっている場所にのみ保持されます
context.globalCompositeOperation
'destination-atop'; // 参照 http://www.w3school.com.cn/htmldom/prop_canvasrenderingcontext2d_globalcompositeoperation.asp context.beginPath();
context.fillStyle
'#ff0000';
context.arc(50,50,30,0, 2 * Math.PI);
context.fill();
// 颜色翻转
var img = new Image();
img.src = 'images/1.jpg';
img.onload = 関数(){
context.drawImage(img, 0,0, 1, 1);
var imgData = context.getImageData(0,0, 1,1);
var ピクセル = imgData.data;
console.log(ピクセル);
for(var i = 0, n = ピクセル.length; i < n; i =4) {
ピクセル[i] = 255 - ピクセル[i];
ピクセル[i 1] = 255 - ピクセル[i 1];
ピクセル[i 2] = 255 - ピクセル[i 2];
}
context.putImageData(imgData, 250, 0);
}
}