誰かがあなたの夢が何であるかを私に尋ねる場合は、私が言う：「あなたが好きな手頃な価格のものを、別の結婚式を作るために離れて滞在するために両親とフィールドトリップを言って、あなたがやるのが大好き何を、人はに属します。彼らの旅。あなた自身のように、それはこれが努力することができ、適切でない場合、それは生活の質の低下につながるが、理由を過ごすために自分のお金で、より多くの勇気づけになることはありません、完璧だった人のような場合はその理由。」
私たちは、QQを持って、それを描く赤い封筒を受け取っていない、
** あなたはそれを行う方法を知っていますか？**私たちはそれでH5キャンバス新機能を学びましょう
最初のJavaScriptの基本を習得することを学ぶ前に、キャンバス
●JavaScriptを導入
JavaScriptファイルとCSSの●導入は二つの方法に分けられたHTML文書で導入同様の方法を、ファイル：
●データ型
●JavaScriptのデータの5つの基本タイプがあります。
●タグ
●JavaScriptでVARを使用すると、ローカル変数宣言されています。
var str="变量名";
var num=1.5;
age=23;
var str=new String;
var cars=new Array("A","B","C);//数组
JavaScriptでは、「新新」キーワードは、すべての変数は、新しいオブジェクトを作成し、変数を宣言し、オブジェクトである、変数を宣言するために使用されます。
●機能
●関数（機能）とも呼ばれる方法がある - - 必要なときに特定の関数呼び出しを実行するためのブロックを形成するために一緒に編成いくつかのコードを繰り返すことができます。
●オブジェクト
●ではJavaScriptのオブジェクトは、データのプロパティとメソッドを持つことです。プロパティ値は、オブジェクトに関連して、オブジェクトが行うことができる操作です。
●イベント処理
●イベント駆動型は、ページ、右の表に示す一般的に使用されるイベントの種類を訪問したときに、ユーザが行った操作を指しイベントいわゆる、JavaScript言語の基本的な特徴です。
●イベント処理
●他のイベントは、多くの属性を持って、以下の表に共通のイベントを属性。
●JavaScriptをHTML DOM
●DOMは、ドキュメントオブジェクトモデル（ドキュメントオブジェクトモデル）と呼ばれています。ページがロードされると、ブラウザの意志のHTMLDOMモデルは、オブジェクトツリーとして構成されています。
●はJavaScriptを使用して動的HTMLを作成します。主に4つの側面インチ
HTML要素と属性を操作する●方法であって、この要素が最初に取得されるべきである。オブジェクトは、共通の目的は、以下の表にHTML文書要素オブジェクトを取得しました。
●getBoundingClientRect（）メソッド
getBoundingClientRect（）メソッドは、ページの要素を得るために使用され、左上、右と下、それぞれ、ブラウザウィンドウの相対位置を、またはelement要素の座標は、現在W3C規格です。
上部、左、右、底： -このメソッドは、戻りオブジェクトインタビュー対象は、6つの属性があり 、幅、高さ、 以下に示すように、特定のアプリケーションを。
知人キャンバス
実際の生活の中でキャンバスキャンバス手段は我々が簡単にページ上のグラフィックスを描画することができ、このキャンバスで「Webページのキャンバス」それを呼び出すことができ、同様にキャンバス絵画用キャンバス、HTML5で、テキストそして写真。
●キャンバスを作成します
●HTML5は、ラベルはページの矩形領域にキャンバスを使用して作成することができ、ラベルを提供します。
キャンバス自体はスクリプト言語を通じて、描画機能を持っていない-グラフィックスを描画する（JavaScriptなどのような）操作API操作を描きます。キャンバスオブジェクトを取得するにはgetElementByld（）メソッドを使用することができます：
●ブラシを準備します
●あなたが準備する必要を塗る開始するキャンバスを持っていたら - - 唯一のブラシは、このブラシは、JavaScriptのスクリプトを使用して取得することができるコンテキストオブジェクト、です。
●座標と始点
●次はあなたが、あるプロットされた点の始まりのコンテキストを設定する必要があり、「あなたはどこ塗装始めるのですが。」
線を引きます●
直線またはスタートポイントにスレッド - ●のlineTo（）メソッドは、位置「X、Y」から図面を定義するために使用されます。
●パス
●開始点とスレッドのポイントを決定するために直線を描画した後、彼らは形成 - あなたは、パスの開始と終了を描くために、複雑なパスを使用する必要がある場合は、パスバーを描画します。
●ストロークと塗りつぶし
パスのみドラフトで、実際の描画線がストロークパスに従ってストローク（）メソッドを実行する必要がありレンダリング●キャンバスのグラフィックは、それはまた、パターンを充填する充填（）メソッドを使用してもよいです。
グラフィックキャンバスを描画するために使用される基本的な手順：
A）キャンバスの作成<キャンバス> </キャンバス>
B）製造用ブラシ（取得したコンテキスト・オブジェクト）：canvas.getContext（ '2D'）;
C）スタート経路計画：context.beginPath（） ;
D）開始点を移動：context.moveTo（X、Y）;
E）ライン...（長方形、円形、ピクチャを描画される）：context.lineTo（X、Y）;
F）閉路：context.closePath（）;
g）のストロークを描く：context.strokeを（）;
ケース：ウェブ落書き
効果：この作品が低すぎる、我々は見ていきます
アイデア
①スクリーンプレートの中央に表示される落書きので<キャンバス>タグは、<中央>タグ内にネストさせることができます。
②書き込みJavaScriptコードは、第1のブラシ及び厚いキャンバスと幅との境界の高さを設定する準備ができてキャンバスの作成;、OnMouseDownイベントのダウンマウスは、開始点を決定するためのmoveTo（）メソッドを使用するときにトリガされ、その後、ブラシのようにマウスポインタを移動したときにマウスlineToはモバイルれるonmousemoveトリガイベントを使用してスクライブ。
③取得したマウスのX、Y座標は非常に単純であり、かつマウスが物体に作用するとき、得ることがclientX clientYプロパティを使用することができ、そのようなキャンバスのように、ブラウザウィンドウ内のオブジェクトの位置を考慮する必要があり、この方法はgetBoundingClientRect0を使用しますキャンバス矩形オブジェクトを取得し、ブラウザにこの矩形オブジェクトの左上隅から減算マウス座標を使用します。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CANVAS画布</title>
</head>
<body>
<center>
<canvas id="cavsElem">
您的浏览器不支持canvas，请升级浏览器
</canvas>
</center>
<script type="text/javascript">
// 当前立即执行function
(function(){
// 初始化画布
var canvas =document.getElementById('cavsElem');
canvas.width= 900;
canvas.height=600;
canvas.style.border='1px solid #000';
// 拿到画布对象
var context=canvas.getContext('2d');
// 在鼠标按下的时候开始绘制线条
canvas.onmousedown =function(e){
// 绘制直线的开始位置
// alert(e.clientX+""+e.clientY);
// 需要知道画布原点的坐标
var pos =canvas.getBoundingClientRect();
// alert(pos.left+""+ pos.top);
// 需要知道距离画布原点的坐标
// alert((e.clientX-pos.left)+":"+(e.clientY-pos.top));
context.beginPath();
context.moveTo((e.clientX-pos.left),(e.clientY-pos.top));
// 监听鼠标移动的事件
canvas.onmousemove= function(e){
console.log((e.clientX-pos.left),(e.clientY-pos.top));
// 不停地绘制线条
context.lineTo((e.clientX-pos.left),(e.clientY-pos.top));
// context.closePath();
context.stroke();
}
canvas.onmouseup =function(){
canvas.onmousemove =null;
}
}
});
</script>
</body>
</html>
長方形のキャンバスをクリアして、四角形を描きます
- それにstrokeRectキャンバス（）と充填矩形矩形の境界線を描画するfillRect（）メソッドで使用しました。
context.strokeRect（X、Y、幅、高さ）。
context.fillRect（X、Y、幅、高さ）。
そこ消しゴムにキャンバスの方法もあり、描かれた四角形の内容をクリアするためにそれを使用します。
context.clearRect（X、Y、幅、高さ）。
円弧と円を描くようにARC（）メソッドを使用してキャンバス。
context.arc（X、Y、RADIUS、startAngleの、endAngle、bAntiClockwise）;
X、Y：中心点の半径：半径startAngleの長さ：スタートラジアンendAngle：終了ラジアンbAntiClockwise：時計回り、真：反時計回り、反時計回り（偽か）
キャンバスは、絵を描きます
●実際に絵のキャンバスを描き、キャンバスに絵を置きます。
//画像の描画
）context.drawlmage（画像、DX、Dyの）を
描画//ない規模に
context.drawlmage（画像、DX、Dyを、DWIDTH、dHeight）
//スライス描画
（context.drawlmageを画像、SX、Syを、 sWidth、 sHeigh、DX、DY、DWIDTH、dHeight）
-----画像：ソース----- DX、DY：----- DWIDTHターゲット、dHeight座標：ターゲットの幅と高さを---- -sx、SY：元の画像開始座標----- SWidth、sHeight：ソース画像の幅と高さ
他の方法キャンバス
●次のように関連するグラフィックスを提供キャンバスの描画方法、プロジェクトに関連するいくつかの方法の導入に続いて、多くは、あります。
ケース：赤い封筒は写真を参照することができ
、全体像を見ることができますキャンバス上に円ランダムに選択された領域を使用すると、赤い封筒を受け取る]をクリックすると、あなただけの、コンテンツの少しを見ることができる：私が参照してくださいするにはここをクリックすると：説明種は、一般的にマーケティングの方法で使用されています。
アイデア：
赤い封筒には、写真を見ることができる
二つのボタンを行うには<A>タグを使用して①、ボタンのスタイルを設定します。
②CSSフィルタ使用して画像のぼかし効果「fiterを：ぼかし（PX）」を達成するために、プロパティは、近視を実現することができるものを見るために眼鏡を着用するのを忘れぼかし
③各要素の位置付け、必要性、<div>タグの相対位置です二つのボタンは、最上層に表示することに注意し、Zインデックスの最大値は<キャンバス>タグ、続いて999に設定することができ、最終的に、<img>タグ、円形の部分を実装するために円形のキャンバスを使用して表示することができますA。
CSS HTML + 2：
①円を描く：円形領域を切断するクリップ（）メソッドを使用する必要があり、その後、画像領域における円を描くsetRegion（領域）、効果は図5-24その中に円形であります。
コールsetRegion（地域）メソッドにドロー（画像）メソッドのニーズ、およびクリアするdlearRect（）メソッドを使用する- -円を描画するための時間が、唯一の円形領域が表示されていることを確実にするために：②絵を描きます。
③初期キャンバス：initCanvas（）メソッドの呼び出しドロー（画像）メソッド。
④ボタンのクリックイベントのリセット（）メソッドは、この方法ではinitCanvas（）メソッド、別の場所にある円形の領域を描画するたびに呼び出され、「私はそれが見たいです」。
⑤法ドロー（画像）メソッドと呼ばれるボタンのクリックイベントのショー（）メソッド、「赤い封筒を受け取った」、円の半径はキャンバスよりも大きい場合、あなたは赤い封筒の影響を受けるために、つまり、全体像を描くことができます。
htmlコード：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>发红包</title>
<link rel="stylesheet" type="text/css" href="css/photo.css"/>
</head>
<body>
<div class="blurDiv">
<img class="blurImg" src="pic.jpg" alt="#"/>
<canvas id="mycanvas"></canvas>
<a class="button" id="buttonreset" href="javascript:reset()">想看我</a>
<a class="button" href="javascript:show()" id="buttonshow"> 收到红包</a>
</div>
<script type="text/javascript" src="js/photo.js"></script>
</body>
</html>
CSSコード：
.body{
margin: 0;
padding: 0;
}
.blurDiv{
position: relative;
width: 877px;
height: 672px;
margin:50px auto 0px;/*定义外边距：顶部50px，左右水平居中，距离底部0px*/
}
.blurDiv .blurImg{
width: 877px;
height: 672px;
display: block;/*把行元素强制转换为块级元素*/
filter: blur(20px);/*滤镜，设置模糊度*/
-webkit-filter:blur(20px);/*webkit保留filter*/
position: absolute;
left: 0;
top: 0;
z-index: 0;
}
.blurDiv #mycanvas{
position: absolute;
top: 0;
left: 0;
z-index: 99;
}
/*按钮*/
.blurDiv .button{
display: block;
width: 240px;
height: 60px;
border-radius: 5px;
line-height: 60px;
text-align: center;
position: absolute;
top: 105%;
font-family: arial;
font-size: 1.5em;/*相当于24px*/
color: #fff;
text-decoration: none;/*清除字体样式*/
z-index:999;
}
.blurDiv #buttonreset{
left: 7%;
background-color: #c85814;
}
.blurDiv #buttonreset:hover{
background-color: #ffb151;
}
.blurDiv #buttonshow{
right:7%;
background-color: #ff2f2e;
}
.blurDiv #buttonshow:hover{
background-color: #ff596b;
}
JSコード：
var canvasWidth =877;//声明画布的宽度
var canvasHeight =672;
var canvas = document.getElementById('mycanvas');
var context =canvas.getContext('2d');
canvas.width=canvasWidth;
canvas.height=canvasHeight;
var image = new Image();
image.src='pic.jpg';
image.οnlοad=function(){
initCanvas();/*注：*/
}
var radius=50;
function initCanvas(){
Region = {
x:Math.random()*(canvasWidth-2*radius)+radius,
y:Math.random()*(canvasHeight-2*radius)+radius,
r:radius
};
draw();
}
function setRegion(){
context.beginPath();
context.arc(Region.x,Region.y,Region.r,2*Math.PI,false);
context.clip();
}
function draw(){
context.clearRect(0,0,canvas.width,canvas.height);
context.save();
setRegion();
context.drawImage(image,0,0);
context.restore();
}
// 单击事件reset方法，在该方法调用initCanvas()方法，每一次在不同的位置绘制圆形区域
function reset(){
initCanvas();
}
function show(){
Region.r=2*Math.max(canvas.width,canvas.height);
draw();
}
