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

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

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

1. var canvas = document.getElementById('canvas');   
2. if (canvas.getContext) {
3. var context = canvas.getContext('2d');   
4. // 放大与缩小
5. context.beginPath();   
6. context.ストロークスタイル = "#000000";   
7. context.ストロークRect(10,10,150,100);   
9. // 放大3倍
10. context.scale(3,3);   
11. context.beginPath();   
12. context.ストロークスタイル = '#cccccc';   
13. context.ストロークRect(10,10,150,100)
15. // 缩小
16. context.scale(0.5,0.5);   
17. context.beginPath();   
18. context.ストロークスタイル = '#cccccc';   
19. context.ストロークRect(10,10,150,100)
21. // 翻转
22. var img = new Image();   
23. img.src = 'images/1.jpg';   
24. img.onload = 関数(){
25. context.drawImage(img, 10,10);           
26. context.scale(1, -1);   
27. context.drawImage(img, 0, -500);   
28. }  
29. // 平移
30. context.beginPath();   
31. context.ストロークスタイル = '#000000';   
32. context.ストロークRect(10,101,150,100);   
33. // x移動 50 y 移動100
34. context.translate(50,100);   
35. context.beginPath();   
36. context.ストロークスタイル = '#cccccc';   
37. context.ストロークRect(10,10,150,100);   
38. // 旋转
39. context.beginPath();   
40. context.ストロークスタイル = '#000000';   
41. context.ストロークRect(200,50,100,50);   
42. // 回転は 0,0 中心に基づいて、translate を使用して自分の配置に合わせた中心回転です
43. context.translate(250,75);   
45. context.rotate(45 * Math.PI /180);   
46. context.translate(-250, -75);   
48. context.beginPath();   
49. context.ストロークスタイル = '#cccccc';   
50. context.ストロークRect(200,50,100,50);   
52. // 変換 四角阵
53. context.beginPath();   
54. context.ストロークスタイル = '#000000';   
55. context.ストロークRect(10,10,150,100);   
57. context.transform(3,0,0,3,0,0);   
58. context.beginPath();   
59. context.ストロークスタイル = '#cccccc';   
60. context.ストロークRect(10,10,150,100);   
62. }

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

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

1. var canvas = ドキュメント.getElementById('canvas'); >
if (canvas.getContext) {
var
3. context = canvas.getContext('2d'); // 線形描画グラデーション
4. var
grd
5. = context.createLinearGradient(0,0,200,100); // 位置は 0.1 ～ 1.0 の間の垂直方向である必要があり、グラデーション内の色の相対位置を示します。color は色を表します
grd.addColorStop(0.1, "#00ff00");
grd.addColorStop(0.8, "#ff0000");
9. context.fillStyle
=
10. grd; context.fillRect(0,0, 200,100); // 放射状グラデーション
var
11. grd
=
12. context
.createRadialGradient(100,100,10,100,100,50);
13. grd.addColorStop(0.1, "#00ff00"); grd.addColorStop(0.8, '#ff0000');
context.fillStyle
14. =
grd
15. ;
context.fillRect(0,0,200,200);
16. // 画像合成効果 context.fillStyle
=
17. '#00ff00'
;
18. context.fillRect(10,10,50,50);
19. // 新規描画 //context.globalCompositeOperation =
"ソースオーバー"
20. ;
// 新しいコンテンツのみを描画し、他のコンテンツはすべて削除します
22. context.globalCompositeOperation = 'コピー'; // グラフィックスが重なっている場合、色の値が減算されて
が決定されます
context.globalCompositeOperation
24. = '暗い'; // キャンバス上にすでにあるコンテンツは、他のグラフィックスと重なっている場所にのみ保持されます
25. context.globalCompositeOperation
=
26. 'destination-atop'; // 参照 http://www.w3school.com.cn/htmldom/prop_canvasrenderingcontext2d_globalcompositeoperation.asp context.beginPath();
27. context.fillStyle
=
28. '#ff0000';
29. context.arc(50,50,30,0, 2 * Math.PI);   
30. context.fill();   
32. // 颜色翻转
33. var img = new Image();   
35. img.src = 'images/1.jpg';   
36. img.onload = 関数(){
37. context.drawImage(img, 0,0, 1, 1);   
38. var imgData = context.getImageData(0,0, 1,1);   
39. var ピクセル = imgData.data;   
40. console.log(ピクセル);   
41. for(var i = 0, n = ピクセル.length; i < n; i =4) {
42. ピクセル[i] = 255 - ピクセル[i];   
43. ピクセル[i 1] = 255 - ピクセル[i 1];   
44. ピクセル[i 2] = 255 - ピクセル[i 2];   
45. }
46. context.putImageData(imgData, 250, 0);   
47. }
48. }