簡単な入門canvas-ボーナス効果で学ぶ
42455 ワード
一、前言
PC端末の先端開発を続けており、インターネットから業界のソフトウェアまで.最近、モバイル端末がフロントエンドに必須のスキルになっていることに気づき、勉強を止めることができませんでした.HTML 5に新しく追加されたものは、canvasが多くて複雑なもので、簡単に入門して、1つの刮賞効果で勉強しました.
二、canvas基礎
本文の目標は刮賞効果を作ることですが、canvasがどうなっているのか分からないと、きっと進めないので、まずcanvasの基礎について話しましょう.
まず、canvasをどう理解すればいいか、考えてみると、一番いい理解方法はcanvasを空白の画紙と理解し、上に絵を描くことができる紙と理解することです.
次に、HTMLタグでcanvasを定義します.たとえば、次のようにします.
これで200枚セットできます×200の画用紙です.
ここで注意したいのは、canvas要素の幅を直接ラベルに書くか、jsで設定する必要があります.cssで設定すると、ブラウザはこの紙をあなたが設定した幅にスケールすることを理解します.予想とは違う.
そして、紙の第二歩があれば絵を描くことです.絵を描くにはペンが必要です.ブラシを入手:
これで、このペンができました.ctxと言います.
それから絵を描きます.ここで重点的に説明するのは、canvasが物を描くのに2歩かかります.最初のステップ:システムに描くものの経路を教える 第2歩:パス をどのように充填する必要があるかをシステムに伝えます.
簡単に言えば、直線を描くと、コードは0,0点から100100点までのパスを設定し、黒い線でこのパスを描くようにシステムに伝えるべきです.
私の上の言葉をコードで説明します.
上のコードは直線を描くことができます.もちろん、canvasができることはこれだけではありません.
基礎なのでcanvasはここまで.canvasについてのものが多すぎますが、原理は基本的にそうです.もちろん、線のほかにも、フィラー(fill)、各種形状(fillRect)、グラフィック(drawImage)などがあります.システム学習canvasには確かに本やチュートリアルが必要です.私も勉強したばかりなので、子弟を誤解しません.これらの基礎も実は次の例を理解するのに十分です.
三、刮賞効果
最も簡単な1つの刮賞効果の原理は大体このようにして、1枚の下図(あるいは文字、例えばありがとうございます)を置いて、それからそれの上で1つのcanvasを覆って、この図を隠して、それからtouchstart(mousedown)、touchmove(mousemove)、touchend事件をバインドします.そして移動するときに「透明」でcanvasを塗りつぶすと、canvasに隠された部分が現れます.
コードを直接見て、最も簡単な実現
上のコードは完全に順番に書かれているので、分かりやすいでしょう.その中で重要なのは透明を設定することであり、設備の判断である.
Update:どのくらいの割合で剃ったかを判断するコードが追加されました.実際のニーズは、剃っただけでユーザーに賞の終了を伝える可能性が高いからです.ここで、掻き抜いた部分は「透明」であるため、コードではRGBA色値のAは透明であり、getImageData法により各画素点のRGBA値を得て比例を算出すればよい.スイープされたスケールデータがコンソールに表示されます.
これで、canvaで最初の小さな効果が完成しました.
当駅の文章を転載して作者と出典の奇抜な花-http://www.cnblogs.com/season-huang/を明記して下さい、いかなる商業の用途に使用しないでください
PC端末の先端開発を続けており、インターネットから業界のソフトウェアまで.最近、モバイル端末がフロントエンドに必須のスキルになっていることに気づき、勉強を止めることができませんでした.HTML 5に新しく追加されたものは、canvasが多くて複雑なもので、簡単に入門して、1つの刮賞効果で勉強しました.
二、canvas基礎
本文の目標は刮賞効果を作ることですが、canvasがどうなっているのか分からないと、きっと進めないので、まずcanvasの基礎について話しましょう.
まず、canvasをどう理解すればいいか、考えてみると、一番いい理解方法はcanvasを空白の画紙と理解し、上に絵を描くことができる紙と理解することです.
次に、HTMLタグでcanvasを定義します.たとえば、次のようにします.
<canvas id="canvas" width="200" height="200"> canvas</canvas>これで200枚セットできます×200の画用紙です.
ここで注意したいのは、canvas要素の幅を直接ラベルに書くか、jsで設定する必要があります.cssで設定すると、ブラウザはこの紙をあなたが設定した幅にスケールすることを理解します.予想とは違う.
そして、紙の第二歩があれば絵を描くことです.絵を描くにはペンが必要です.ブラシを入手:
var ctx = document.getElementById("canvas").getContext("2d");これで、このペンができました.ctxと言います.
それから絵を描きます.ここで重点的に説明するのは、canvasが物を描くのに2歩かかります.
簡単に言えば、直線を描くと、コードは0,0点から100100点までのパスを設定し、黒い線でこのパスを描くようにシステムに伝えるべきです.
私の上の言葉をコードで説明します.
ctx.beginPath(); //
ctx.moveTo(0, 0); // 0,0
ctx.lineTo(100, 100); // 100,100
ctx.closePath(); //
ctx.lineWidth = "5"; // 5px
//
ctx.strokeStyle = "#000"; //
ctx.stroke(); // 上のコードは直線を描くことができます.もちろん、canvasができることはこれだけではありません.
基礎なのでcanvasはここまで.canvasについてのものが多すぎますが、原理は基本的にそうです.もちろん、線のほかにも、フィラー(fill)、各種形状(fillRect)、グラフィック(drawImage)などがあります.システム学習canvasには確かに本やチュートリアルが必要です.私も勉強したばかりなので、子弟を誤解しません.これらの基礎も実は次の例を理解するのに十分です.
三、刮賞効果
最も簡単な1つの刮賞効果の原理は大体このようにして、1枚の下図(あるいは文字、例えばありがとうございます)を置いて、それからそれの上で1つのcanvasを覆って、この図を隠して、それからtouchstart(mousedown)、touchmove(mousemove)、touchend事件をバインドします.そして移動するときに「透明」でcanvasを塗りつぶすと、canvasに隠された部分が現れます.
コードを直接見て、最も簡単な実現
1 <!DOCTYPE html>
2 <!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7"><![endif]-->
3 <!--[if IE 7]><html class="no-js lt-ie9 lt-ie8"><![endif]-->
4 <!--[if IE 8]><html class="no-js lt-ie9"> <![endif]-->
5 <!--[if gt IE 8]><!--><html class="no-js"><!--<![endif]-->
6
7 <head>
8 <meta charset="utf-8">
9 <meta http-equiv="X-UA-Compatible" content="IE=edge">
10 <title> </title>
11 <meta name="description" content=" ">
12 <meta name="viewport" content="width=device-width, initial-scale=1">
13
14 <style>
15 body{margin: 0;}
16 #price{width: 200px; height: 100px; font-size: 40px; color: #f60; line-height: 100px; text-align: center;}
17 #canvas{position: absolute; top: 0; left: 0;}
18 </style>
19 </head>
20
21 <body>
22
23 <div id="price"> </div>
24 <canvas id="canvas" width="200" height="100"> canvas</canvas>
25
26 <script>
27
28 //
29 var cvs = document.getElementById("canvas"),
30 ctx = cvs.getContext("2d"),
31 touchRadius = 5; // ，
32
33 //
34 ctx.fillStyle = "#ccc";
35 ctx.fillRect(0, 0, 200, 100); // fillRect，
36
37 //
38 // @param { integer } x
39 // @param { integer } y
40 // @param { integer }
41 // @param { string } （ ‘ ’， ）
42 var fillCircle = function (x, y, radius, fillColor) {
43 this.fillStyle = fillColor || "#eee";
44 this.beginPath();
45 this.moveTo(x, y);
46 this.arc(x, y, radius, 0, Math.PI * 2, false); //
47 this.fill();
48 };
49
50 // （ ， http://www.cnblogs.com/jscode/p/3580878.html）
51 var getTransparentPercent = function (ctx, width, height) {
52 var imgData = ctx.getImageData(0, 0, width, height), // canvas
53 pixles = imgData.data,
54 transPixs = [];
55 for (var i = 0, j = pixles.length; i < j; i += 4) { // [R, G, B, A]， 4
56 var a = pixles[i + 3]; // alpha
57 if (a === 0) { // alpha 0，
58 transPixs.push(i);
59 }
60 }
61 return (transPixs.length / (pixles.length / 4) * 100).toFixed(2);
62 }
63
64 // （ ， http://www.cnblogs.com/jscode/p/3580878.html）
65 // PC
66 var device = /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(navigator.userAgent.toLowerCase()),
67 clickEvtName = device ? 'touchstart' : 'mousedown',
68 moveEvtName = device ? 'touchmove' : 'mousemove';
69
70 //
71 if (!device) {
72 var isMouseDown = false;
73 document.addEventListener('mouseup', function (e) {
74 isMouseDown = false;
75 }, false);
76 } else {
77 document.addEventListener("touchmove", function (e) {
78 if (isMouseDown) {
79 e.preventDefault();
80 }
81 }, false);
82 document.addEventListener('touchend', function (e) {
83 isMouseDown = false;
84 }, false);
85 }
86
87 //
88 cvs.addEventListener(clickEvtName, function (e) {
89 isMouseDown = true;
90 var x = (device ? e.touches[0].clientX : e.clientX);
91 var y = (device ? e.touches[0].clientY : e.clientY);
92 ctx.globalCompositeOperation = 'destination-out'; // ， canvas ，
93 fillCircle.call(ctx, x, y, touchRadius);
94 console.log(" ：" + getTransparentPercent(ctx, 200, 100));
95 }, false);
96
97 //
98 cvs.addEventListener(moveEvtName, function (e) {
99 if (!device && !isMouseDown) {
100 return false;
101 }
102 var x = (device ? e.touches[0].clientX : e.clientX);
103 var y = (device ? e.touches[0].clientY : e.clientY);
104 ctx.globalCompositeOperation = 'destination-out';
105 fillCircle.call(ctx, x, y, touchRadius);
106 console.log(" ：" + getTransparentPercent(ctx, 200, 100));
107 }, false);
108 </script>
109 </body>
110
111 </html>上のコードは完全に順番に書かれているので、分かりやすいでしょう.その中で重要なのは透明を設定することであり、設備の判断である.
Update:どのくらいの割合で剃ったかを判断するコードが追加されました.実際のニーズは、剃っただけでユーザーに賞の終了を伝える可能性が高いからです.ここで、掻き抜いた部分は「透明」であるため、コードではRGBA色値のAは透明であり、getImageData法により各画素点のRGBA値を得て比例を算出すればよい.スイープされたスケールデータがコンソールに表示されます.
これで、canvaで最初の小さな効果が完成しました.
当駅の文章を転載して作者と出典の奇抜な花-http://www.cnblogs.com/season-huang/を明記して下さい、いかなる商業の用途に使用しないでください