学習キャンバス(15):単語を書くことを学ぶ

張の最初のレンダリング:
学習キャンバス(15):単語を書くことを学ぶ

この特殊効果の後には、MOCオンラインビデオリンクのビデオが続きますhttps : //www.imooc.com/learn/284

ソースコードと技術的ポイントが別館にアップロードされました。ダウンロードする必要があります。

すぐ下のコード(PS:コード内のコメントは、教師の元のコメントではなく、個人的な理解に基づいて追加されています):

ページ構造

  <!doctype html>
 <html lang = "en">
  <head>
   <meta charset = "UTF-8">
   <meta name = "Generator" content = "EditPlus">
   <meta name = "Author" content = "">
   <meta name = "Keywords" content = "">
   <meta name = "Description" content = "">
   <title> canvas学習 - 単語を書くことを学ぶ</ title>
   <link type = "text / css" href = "handwriting.css" rel = "stylesheet" />
   <meta name = "viewport"
         content = "height = device-height、
                 width =デバイス幅、
                初期スケール= 1.0、
                最小スケール= 1.0、
                最大スケール= 1.0、
                 user-scalable = no "/>
   <script type = "text / javascript" src = "handwriting.js"> </ script>
   <script type = "text / javascript" src = "jquery.min.js"> </ script>
  </ head>
  <body>
   <canvas id = "myCanvas">
        あなたのブラウザはキャンバスをサポートしていないので、別のブラウザを試してみてください!<! - この文はキャンバス対応ブラウザでは無視され、サポートされていませんが表示されます - >
     </ canvas>

     <! - 色の選択と削除 - >
     <div id = "controller">
         <div id = "black_btn" class = "color_btn color_btn_selected"> </ div>
         <div id = "red_btn" class = "color_btn"> </ div>
         <div id = "orange_btn" class = "color_btn"> </ div>
         <div id = "yellow_btn" class = "color_btn"> </ div>
         <div id = "green_btn" class = "color_btn"> </ div>
         <div id = "cyan_btn" class = "color_btn"> </ div>
         <div id = "blue_btn" class = "color_btn"> </ div>     

         <div id = "clear_btn" class = "op_btn">除外</ div>
         <div class = "clearfix"> </ div>
     </ div>
  </ body>
 </ html> 

CSSスタイル

  #myCanvas {
    高さ:100%;
    表示:ブロック;
    マージン:0 auto;
 }
 #controller {
    マージン:0 auto;
 }
 .op_btn {
    フロート
     margin:10px 0 0 10px;
     border:2px solid#aaa;
    幅:80px;
    高さ:40px;
    行の高さ:40ピクセル。
     font-size:20px;
     text-align:center;
     border-radius:5px 5px;
    カーソル:ポインタ;
    背景色:白;
     font-weight:太字;
     font-family:Microsoft Yahei、Arial;
 }
 .op_btn:ホバー{
    背景色:#def;
 }
 .clearfix {
    両方ともクリア。
 }
 .color_btn {
     float:left;
     margin:10px 5px 0 0;
    ボーダー:5pxソリッドホワイト;
    幅:40ピクセル。
    高さ:40px;
     border-radius:5px 5px;
    カーソル:ポインタ;
 }
 .color_btn:ホバー{
    ボーダー:5pxソリッドバイオレット;
 }
 .color_btn_selected {
    国境:5pxソリッドブルー;
 }
 #black_btn {
    背景色:黒;
 }
 #red_btn {
    背景色:赤;
 }
 #orange_btn {
    背景色:オレンジ;
 }
 #yellow_btn {
    背景色:黄色;
 }
 #green_btn {
    背景色:緑;
 }
 #blue_btn {
    背景色:青;
 }
 #cyan_btn {
    背景色:シアン;
 } 

JSコード

  //リンクを教えてください:http://www.imooc.com/learn/284
 var windowWidth = 600;
 var windowHeight = 600;
 var isMouseDowm = false; //マウスが押されたときvar myCanvas = null;
 var context = null;
 var lastLoc = {x:0、y:0}; //マウスの最後の脚var lastTimestamp = 0;
 var lastLineWidth = -1; //最後のストロークのサイズvar strokeColor = "black";
 window.onload = function(){
     myCanvas = document.getElementById( "myCanvas");
     if(myCanvas.getContext( "2d")){
         windowWidth = document.documentElement.clientWidth-20;
         windowHeight = document.documentElement.clientHeight-20-60; // 60:ボタンをクリアするために必要な高さ// 2つの数値のうち最小のものを取るif(windowWidth> windowHeight){windowWidth = windowHeight;
         else {windowHeight = windowWidth;}
         //アラート(windowWidth);
         myCanvas.width = windowWidth;
         myCanvas.height = windowHeight;
         context = myCanvas.getContext( "2d");
         //alert(myCanvas.width+"\n"+myCanvas.height);

         //リボンのサイズを制御する$( "#controller")Css( "width"、windowWidth + "px");
         // drawGird()と呼ばれる文字のグリッドを描画します。

         //マウスのデフォルトイベントを停止するmyCanvas.onmousedown = function(e){
             e.preventDefault();
             //console.log("mouse down ");
             startStroke({x:e.clientX、y:e.clientY});
         }
         myCanvas.onmouseup = function(e){
             e.preventDefault();
             //console.log("mouse up ");
             endStroke();
         }
         myCanvas.onmouseout = function(e){
             e.preventDefault();
             //console.log("mouseout ");
             endStroke();
         }
         myCanvas.onmousemove = function(e){
             e.preventDefault();
             if(isMouseDowm){
                 //console.log( "マウス移動");
                 moveStroke({x:e.clientX、y:e.clientY});
             }
         }

         //タッチイベントを追加するmyCanvas.addEventListener( "touchstart"、function(e){
             e.preventDefault();
             var touch = e.touches [0]; // 1つのタッチポイントを取得startStroke({x:touch.pageX、y:touch.pageY});
         });
         myCanvas.addEventListener( "touchend"、function(e){
             e.preventDefault();
             endStroke();
         });
         myCanvas.addEventListener( "touchmove"、function(e){
             e.preventDefault();
             if(isMouseDowm){
                 var touch = e.touches [0]; // 1つだけのタッチポイントを取得moveStroke({x:touch.pageX、y:touch.pageY});
             }
         });

         // document.getElementById( "clear_btn")をクリアします。Onclick = function(){
             //キャンバスの内容をクリアするcontext.clearRect(0,0、windowWidth、windowHeight);
             //グリフを描画するdrawGird();
         }

         //色関数$( "。Color_btn")を選択します。(function(){
             //選択状態をクリア$( "。Color_btn")。RemoveClass( "color_btn_selected");
             $(this).addClass( "color_btn_selected");
             strokeColor = $(これ).css( "背景色");
         });

     } else {
        偽を返します。
     }
 }

 //描画関数を開始するstartStroke(point){
     isMouseDowm = true;
     lastLoc = windowToCanvas(point.x、point.y);
     lastTimestamp =新しいDate()。getTime();
     //alert(lastLoc.x+","+lastLoc.y);
 }

 //描画関数を終了するendStroke(){
     isMouseDowm = false;
 }

 //描画プロセス関数moveStroke(point){
     //マウスが置かれているキャンバスの現在の位置を取得します。var curLoc = windowToCanvas(point.x、point.y);

     //書き込み速度に基づいてストロークサイズを適用する// 2点間の距離を計算するvar s = calcDistance(curLoc、lastLoc);
     // 2つの点を描画するのに必要な時間を計算するvar curTimestamp = new Date()。GetTime();
     var t = curTimestamp-lastTimestamp; //現在の時間から最後のストロークを引いた値を使用する。// sとtの値に基づいて行の幅を計算する。var lineWidth = calcLineWidth(s、t);

     //アラート(curLoc);
     context.beginPath();
     context.moveTo(lastLoc.x、lastLoc.y);
     context.lineTo(curLoc.x、curLoc.y);
     context.closePath();
     context.strokeStyle = strokeColor;
     context.lineCap = "round";
     context.lineJoin = "round";
     context.lineWidth = lineWidth;
     context.stroke();

     lastLoc = curLoc;
     lastTimestamp = curTimestamp;
     lastLineWidth = lineWidth;
 }

 //このメソッドは、キャンバス内の座標にウィンドウ座標を変換するために使用されますfunction windowToCanvas(x、y){
     var bbox = myCanvas.getBoundingClientRect();
     return {x:Math.round(x-b​​box.left)、y:Math.round(y-bbox.top)};
 }

 //このメソッドは、2つの点間の距離を計算するために使用されますfunction calcDistance(loc1、loc2){
     Math.sqrt((loc1.x-loc2.x)*(loc1.x-loc2.x)+(loc1.y-loc2.y)*(loc1.y-loc2.y))を返します。
 }

 //このメソッドは、距離と時間に応じて速度を計算し、線幅を順に計算します。function calcLineWidth(s、t){
     var v = s / t;
     //ペンの速度が速く、遅い場合の状況を最初に判断するvar min = 5、max = 20; //ストロークvar min2 = 0.5、max2 = 10;
     if(v <= min2){/ /ブラシ速度が特に遅い場合、ストロークは特に大きくなるはずですresult = max;
     } else if(v> = max2){/ /ブラシ速度が特に速い場合、ストロークは特に小さくなければならないresult = min;
     } else {//あなたが速くないか遅い場合は、差分メソッドを使用して徐々に減少させます。//計算方法:最大値を使用 - (現在の速度と最小速度の差)(最大速度と最小速度の間差)*(最大ストロークと最小ストロークの差)
        結果= max  - (v-min2)/(max2-min2)*(max-min)
     }

     //平滑化の問題を解くif(lastLineWidth ==  -  1){//戻り値が割り当てられていない。
     }

    戻り値lastLineWidth * 3/4 +結果* 1/4;
 }

 //このメソッドは、gridという単語を描画するために使用されますfunction drawGird(){
     context.save();
     //赤い四角形を描くcontext.strokeStyle = "rgb(230,11,9)";
     context.beginPath();
     context.rect(0,0、windowWidth、windowWidth);
     context.closePath();
     context.lineWidth = 5;
     context.stroke();

     //単語gridを描画します。context.beginPath();
     context.moveTo(0,0);
     context.lineTo(windowWidth、windowHeight);

     context.moveTo(windowWidth / 2,0);
     context.lineTo(windowWidth / 2、windowHeight);

     context.moveTo(windowWidth、0);
     context.lineTo(0、windowHeight);

     context.moveTo(0、windowHeight / 2);
     context.lineTo(windowWidth、windowHeight / 2);

     context.closePath();
     context.lineWidth = 1;
     context.stroke();
     context.restore();
 } 
カテゴリ:Webフロントエンド 時間:2017-11-27 人気:17
この記事では、 キャンバス、抽選

関連記事

Copyright (C) socapnw.com, All Rights Reserved.

Socapnw All Rights Reserved.

processed in 0.542 (s). 11 q(s)