亚洲香蕉成人av网站在线观看_欧美精品成人91久久久久久久_久久久久久久久久久亚洲_热久久视久久精品18亚洲精品_国产精自产拍久久久久久_亚洲色图国产精品_91精品国产网站_中文字幕欧美日韩精品_国产精品久久久久久亚洲调教_国产精品久久一区_性夜试看影院91社区_97在线观看视频国产_68精品久久久久久欧美_欧美精品在线观看_国产精品一区二区久久精品_欧美老女人bb

首頁 > 開發 > JS > 正文

js canvas實現寫字動畫效果

2024-05-06 16:46:58
字體:
來源:轉載
供稿:網友

本文實例為大家分享了js canvas實現寫字動畫效果展示的具體代碼,供大家參考,具體內容如下

頁面html:

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>學寫一個字</title> <script src="jquery-2.1.3.min.js" type="text/javascript"></script> <link href="handwriting.css" rel="stylesheet" type="text/css"/> <meta name="viewport"   content=" height = device-height,     width = device-width,     initial-scale = 1.0,     minimum-scale = 1.0,     maximum-scale = 1.0,     user-scalable = no"/> //兼容移動端 </head><body>  <canvas id="canvas">  您的瀏覽器不支持canvas </canvas>//寫字區域 <div id="controller">  <div id="black_btn" class="color_btn color_btn_selected"></div>  <div id="blue_btn" class="color_btn"></div>  <div id="green_btn" class="color_btn"></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="clear_btn" class="op_btn">清 除</div>  <div class="clearfix"></div> </div>  <script src = "handwriting.js"></script></body></html>

頁面css:

#canvas{ display:block; margin:0 auto;}#controller{ margin:0 auto;}.op_btn{ float: right; margin:10px 0 0 10px; border:2px solid #aaa; width:80px; height:40px; line-height:40px; font-size:20px; text-align:center; border-radius: 5px 5px; cursor:pointer; background-color: white; font-weight:bold; font-family: Microsoft Yahei, Arial;}.op_btn:hover{ background-color:#def;}.clearfix{ clear:both;} .color_btn{ float: left; margin: 10px 10px 0 0; border:5px solid white; width:40px; height:40px; border-radius: 5px 5px; cursor:pointer;}.color_btn:hover{ border: 5px solid violet;}.color_btn_selected{ border: 5px solid blueviolet;}#black_btn{ background-color: black;}#blue_btn{ background-color: blue;}#green_btn{ background-color: green;}#red_btn{ background-color: red;}#orange_btn{ background-color: orange;}#yellow_btn{ background-color: yellow;}

頁面js:

var canvasWidth = Math.min( 800 , $(window).width() - 20 );//如果屏幕小于800px,則取值為屏幕大小寬度,便于移動端的展示,-20是為了使得米字格不緊貼于邊緣var canvasHeight = canvasWidth; var strokeColor = "black";var isMouseDown = false; //鼠標按下時候的狀態var lastLoc = {x:0,y:0}; //鼠標上一次結束時的位置var lastTimestamp = 0; //上一次時間,與筆刷粗細有關var lastLineWidth = -1; //筆刷粗細 var canvas = document.getElementById("canvas");var context = canvas.getContext("2d"); canvas.width = canvasWidth;canvas.height = canvasHeight; $("#controller").css("width",canvasWidth+"px");drawGrid();//畫米字格 $("#clear_btn").click( function(e){  context.clearRect( 0 , 0 , canvasWidth, canvasHeight );  drawGrid(); })$(".color_btn").click( function(e){  $(".color_btn").removeClass("color_btn_selected");  $(this).addClass("color_btn_selected");  strokeColor = $(this).css("background-color"); })//適用于移動端觸控function beginStroke(point){  isMouseDown = true //console.log("mouse down!"); lastLoc = windowToCanvas(point.x, point.y); //上一次坐標位置 lastTimestamp = new Date().getTime(); }function endStroke(){ isMouseDown = false;}function moveStroke(point){  var curLoc = windowToCanvas( point.x , point.y ); var curTimestamp = new Date().getTime(); var s = calcDistance( curLoc , lastLoc ); var t = curTimestamp - lastTimestamp;  var lineWidth = calcLineWidth( t , s );  //draw context.beginPath(); context.moveTo( lastLoc.x , lastLoc.y ); context.lineTo( curLoc.x , curLoc.y );  context.strokeStyle = strokeColor; context.lineWidth = lineWidth; context.lineCap = "round"; context.lineJoin = "round"; context.stroke();  lastLoc = curLoc; lastTimestamp = curTimestamp; lastLineWidth = lineWidth;} canvas.onmousedown = function(e){ e.preventDefault(); beginStroke( {x: e.clientX , y: e.clientY} );};canvas.onmouseup = function(e){ e.preventDefault(); endStroke();};canvas.onmouseout = function(e){ e.preventDefault(); endStroke();};canvas.onmousemove = function(e){ e.preventDefault(); if( isMouseDown ){  moveStroke({x: e.clientX , y: e.clientY}) }}; canvas.addEventListener('touchstart',function(e){ e.preventDefault(); touch = e.touches[0]; beginStroke( {x: touch.pageX , y: touch.pageY} )});canvas.addEventListener('touchmove',function(e){ e.preventDefault(); if( isMouseDown ){  touch = e.touches[0];  moveStroke({x: touch.pageX , y: touch.pageY}); }});canvas.addEventListener('touchend',function(e){ e.preventDefault(); endStroke();}); var maxLineWidth = 30;var minLineWidth = 1;var maxStrokeV = 10;var minStrokeV = 0.1;function calcLineWidth( t , s ){  var v = s / t;  var resultLineWidth; if( v <= minStrokeV )  resultLineWidth = maxLineWidth; else if ( v >= maxStrokeV )  resultLineWidth = minLineWidth; else{  resultLineWidth = maxLineWidth - (v-minStrokeV)/(maxStrokeV-minStrokeV)*(maxLineWidth-minLineWidth); }  if( lastLineWidth == -1 )  return resultLineWidth;  return resultLineWidth*1/3 + lastLineWidth*2/3;} function calcDistance( loc1 , loc2 ){  return Math.sqrt( (loc1.x - loc2.x)*(loc1.x - loc2.x) + (loc1.y - loc2.y)*(loc1.y - loc2.y) );} function windowToCanvas( x , y ){ var bbox = canvas.getBoundingClientRect(); return {x:Math.round(x-bbox.left) , y:Math.round(y-bbox.top)}}function drawGrid(){  context.save();  context.strokeStyle = "rgb(230,11,9)";  context.beginPath(); context.moveTo( 3 , 3 ); context.lineTo( canvasWidth - 3 , 3 ); context.lineTo( canvasWidth - 3 , canvasHeight - 3 ); context.lineTo( 3 , canvasHeight - 3 ); context.closePath(); context.lineWidth = 6; context.stroke();  context.beginPath(); context.moveTo(0,0); context.lineTo(canvasWidth,canvasHeight);  context.moveTo(canvasWidth,0); context.lineTo(0,canvasHeight);  context.moveTo(canvasWidth/2,0); context.lineTo(canvasWidth/2,canvasHeight);  context.moveTo(0,canvasHeight/2); context.lineTo(canvasWidth,canvasHeight/2);  context.lineWidth = 1; context.stroke();  context.restore();}

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持VeVb武林網。


注:相關教程知識閱讀請移步到JavaScript/Ajax教程頻道。
發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
亚洲香蕉成人av网站在线观看_欧美精品成人91久久久久久久_久久久久久久久久久亚洲_热久久视久久精品18亚洲精品_国产精自产拍久久久久久_亚洲色图国产精品_91精品国产网站_中文字幕欧美日韩精品_国产精品久久久久久亚洲调教_国产精品久久一区_性夜试看影院91社区_97在线观看视频国产_68精品久久久久久欧美_欧美精品在线观看_国产精品一区二区久久精品_欧美老女人bb
国产午夜精品视频免费不卡69堂| 国产日韩欧美在线播放| 亚州成人av在线| 久久久亚洲国产天美传媒修理工| 丰满岳妇乱一区二区三区| 日韩精品免费在线视频| 国产精品青青在线观看爽香蕉| 欧美日韩美女在线观看| 久久久成人精品| 国产性色av一区二区| 欧美中文字幕第一页| 亚洲图片制服诱惑| 亚洲精品一区二区三区不| 亚洲高清av在线| 欧美在线视频一区二区| 国产精品99蜜臀久久不卡二区| 中文字幕在线精品| 欧美精品成人在线| 日韩av日韩在线观看| 久久人人爽人人爽人人片av高清| 欧洲亚洲在线视频| 亚洲精品中文字幕女同| 一本色道久久88综合日韩精品| 欧美日韩精品在线播放| 日韩电影免费观看在线观看| www.亚洲一区| 国产小视频91| 久久久久国产精品www| 亚洲欧美精品suv| 在线观看免费高清视频97| 日韩欧美大尺度| 亚洲va久久久噜噜噜久久天堂| 亚洲电影免费观看高清完整版在线观看| 久久成人这里只有精品| 91视频免费网站| 美女扒开尿口让男人操亚洲视频网站| 亚洲精品在线看| 国产a∨精品一区二区三区不卡| 亚洲欧美www| 久久久久久久久久久免费| 欧美国产精品va在线观看| 国产精品久久久久久久久免费看| 亚洲最大成人在线| 欧美大片网站在线观看| 国产亚洲欧洲在线| 成人中文字幕+乱码+中文字幕| 夜夜嗨av一区二区三区免费区| 69国产精品成人在线播放| 中文字幕精品在线| 日韩激情第一页| 亚洲xxxxx性| 久久久久久久久电影| 日韩久久精品成人| 欧美日韩高清区| 亚洲国产成人久久| www日韩欧美| 国产精品第100页| 欧美天天综合色影久久精品| 欧美日韩午夜视频在线观看| 亚洲japanese制服美女| 亚洲黄色www网站| 78m国产成人精品视频| 韩国视频理论视频久久| 精品自在线视频| 欧美成人精品在线视频| 91精品美女在线| 91超碰中文字幕久久精品| 伊人久久久久久久久久久久久| 国产69精品久久久久久| 久久精品中文字幕电影| 亚洲精品小视频| 欧美—级高清免费播放| 国产高清在线不卡| 亚洲精品电影在线观看| 成人久久久久久| 国产精品国产三级国产aⅴ浪潮| 久久久久久欧美| 6080yy精品一区二区三区| 亚洲精品国偷自产在线99热| 久久天天躁狠狠躁夜夜躁| 国产精品九九九| 久久精品成人一区二区三区| 久久久99免费视频| 麻豆国产精品va在线观看不卡| 亚洲欧美精品伊人久久| 中日韩午夜理伦电影免费| 久热精品视频在线观看一区| 亚洲大胆人体在线| 91成人国产在线观看| 国产精品香蕉在线观看| 日韩在线视频中文字幕| 98精品国产高清在线xxxx天堂| 日韩一级裸体免费视频| 亚洲精品综合久久中文字幕| 精品国产一区二区在线| 一区二区亚洲欧洲国产日韩| 亚洲女成人图区| 日韩免费精品视频| 欧美片一区二区三区| 中文字幕亚洲欧美日韩高清| 97久久超碰福利国产精品…| 国产一区二区三区久久精品| 在线观看国产精品淫| 久久久欧美精品| 国产精品欧美风情| 久久好看免费视频| 欧美精品电影免费在线观看| 日韩成人在线播放| 久久国产精品免费视频| 欧美电影在线观看网站| 日韩在线播放一区| 91精品久久久久久久久中文字幕| 91精品国产乱码久久久久久蜜臀| 亚洲天堂av在线免费观看| 国产精品直播网红| 日韩专区中文字幕| 国产精品igao视频| 欧美最猛性xxxx| 亚洲精品美女免费| 午夜精品久久久99热福利| 午夜精品福利在线观看| 狠狠躁夜夜躁人人爽天天天天97| 亚洲国产精品一区二区久| 中日韩美女免费视频网址在线观看| 国产精品精品一区二区三区午夜版| 美女黄色丝袜一区| 欧美电影免费播放| 亚洲成人亚洲激情| 最近2019年好看中文字幕视频| 日本久久久a级免费| 亚洲天堂日韩电影| 91中文在线视频| 欧美性猛交xxxx乱大交蜜桃| 久久这里只有精品99| 91av在线视频观看| 欧美电影免费观看大全| 91精品国产99久久久久久| 九色精品免费永久在线| 成人免费高清完整版在线观看| 高清欧美性猛交xxxx| 欧美午夜视频在线观看| 亚洲欧美制服中文字幕| 久久手机精品视频| 97视频免费看| 欧美一级大片在线观看| 亚洲欧美日韩久久久久久| 亚洲第一网站男人都懂| 欧美成人中文字幕| 亚洲人成亚洲人成在线观看| 北条麻妃一区二区三区中文字幕| 国产一区二区三区在线播放免费观看| 久久精品国产一区二区三区| 粉嫩老牛aⅴ一区二区三区| 亚洲香蕉成视频在线观看| 精品亚洲一区二区| 欧美激情免费看| 国产日韩精品综合网站| 欧美性xxxx极品hd满灌| 一本久久综合亚洲鲁鲁| 成人av在线天堂| 亚洲国产精品va在线| 欧美成人黄色小视频| 国产欧美一区二区三区久久人妖| 成人亚洲激情网|