2. 程式人生 > >js 利用canvas標籤畫一個儲存按鈕（附加svg動態按鈕）

js 利用canvas標籤畫一個儲存按鈕（附加svg動態按鈕）

阿新 • • 發佈：2019-02-18
var timeoutID = null; function ondb(e,wth,hth){ clearTimeout(timeoutID); sDraw(e,wth,hth,1); } function onsgclick(e,wth,hth){ clearTimeout(timeoutID); timeoutID = window.setTimeout(function
(){sDraw(e,wth,hth,0);}, 200); } //e為canvas物件的ID,wth圖片寬，hth圖片高 function sDraw(e,wth,hth,isondb){ $("#" + e).remove(); $("body").prepend('<canvas id="myCanvas" height="150px" width="300px"></canvas>'); var c=document.getElementById(e); //水平起始位置x
var x = c.offsetLeft + c.offsetWidth/ 2; //垂直起始位置y var y = c.offsetTop + c.offsetHeight/ 2; var dx = wth / 16; var dy = hth / 16; if(!isondb){ var ctx=c.getContext("2d"); ctx.strokeStyle="#73bae3"
;//設定線條顏色 ctx.beginPath(); ctx.moveTo(x, y); ctx.lineTo(x, y + hth); ctx.lineTo(x + wth, y + hth); ctx.lineTo(x + wth, y); ctx.lineTo(x, y); ctx.moveTo(x + 4 * dx, y); ctx.lineTo(x + 4 * dx, y + 8 * dy); ctx.lineTo(x + 12 * dx, y + 8 * dy); ctx.lineTo(x + 12 * dx, y); ctx.moveTo(x + 6 * dx, y + 11 * dy); ctx.lineTo(x + 6 * dx, y + 13 * dy); ctx.lineTo(x + 10 * dx, y + 13 * dy); ctx.lineTo(x + 10 * dx, y + 11 * dy); ctx.lineTo(x + 6 * dx, y + 11 * dy); }else{ var ctx=c.getContext("2d"); ctx.strokeStyle="#73bae3";//設定線條顏色 ctx.beginPath(); ctx.moveTo(x, y); ctx.lineTo(x, y + hth);//畫左邊直線 ctx.lineTo(x + wth, y + hth); ctx.lineTo(x + wth, y); ctx.lineTo(x, y); ctx.moveTo(x + 4 * dx, y); ctx.lineTo(x + 4 * dx, y + 8 * dy); ctx.lineTo(x + 12 * dx, y + 8 * dy); ctx.lineTo(x + 12 * dx, y); ctx.moveTo(x + 6 * dx, y + 11 * dy); ctx.lineTo(x + 6 * dx, y + 13 * dy); ctx.lineTo(x + 10 * dx, y + 13 * dy); ctx.lineTo(x + 10 * dx, y + 11 * dy); ctx.lineTo(x + 6 * dx, y + 11 * dy); } ctx.fillStyle = "#c7e3c7" ;//設定背景顏色 ctx.fill() //背景顏色填充 ctx.stroke(); } /*Javascript程式碼片段*/ (function() { function extend( a, b ) { for( var key in b ) { if( b.hasOwnProperty( key ) ) { a[key] = b[key]; } } return a; } function SVGButton( el, options ) { this.el = el; this.options = extend( {}, this.options ); extend( this.options, options ); this.init(); } SVGButton.prototype.options = { speed : { reset : 800, active : 150 }, easing : { reset : mina.elastic, active : mina.easein } }; SVGButton.prototype.init = function() { this.shapeEl = this.el.querySelector( 'span.morph-shape' ); var s = Snap( this.shapeEl.querySelector( 'svg' ) ); this.pathEl = s.select( 'path' ); this.paths = { reset : this.pathEl.attr( 'd' ), active : this.shapeEl.getAttribute( 'data-morph-active' ) }; this.initEvents(); }; SVGButton.prototype.initEvents = function() { this.el.addEventListener( 'mousedown', this.down.bind(this) ); this.el.addEventListener( 'touchstart', this.down.bind(this) ); this.el.addEventListener( 'mouseup', this.up.bind(this) ); this.el.addEventListener( 'touchend', this.up.bind(this) ); this.el.addEventListener( 'mouseout', this.up.bind(this) ); }; SVGButton.prototype.down = function() { this.pathEl.stop().animate( { 'path' : this.paths.active }, this.options.speed.active, this.options.easing.active ); }; SVGButton.prototype.up = function() { this.pathEl.stop().animate( { 'path' : this.paths.reset }, this.options.speed.reset, this.options.easing.reset ); }; [].slice.call( document.querySelectorAll( 'button.button--effect-2' ) ).forEach( function( el ) { new SVGButton( el, { speed : { reset : 650, active : 650 }, easing : { reset : mina.elastic, active : mina.elastic } } ); } ); })();

相關推薦

js 利用canvas標籤畫一個儲存按鈕（附加svg動態按鈕）

var timeoutID = null; function ondb(e,wth,hth){ clearTimeout(timeoutID); sDraw(e,wth,hth,1);

Jscript動畫系列(1)-----用JS在Canvas上畫一個小球

最近在學習JS動畫，有一些心的同大家分享！由於前期內容比較少，樣式什麼的就寫在Html檔案裡了！ 首先(Index.html) <!doctype html> <html>

js計算時間間隔的一個小例項（計算出差時長）

/** * 計算時間間隔 精確到0.5天 * @param startDate 開始時間 * @param endDate 結束時間 * @param startAmp 開始上下午 * @param endAmp 結束上下午 */function autoMaticTime(startDate,endDate

利用canvas畫布畫出一個鐘表

旋轉角度 stroke 每次 需要 開始 浮點型 nbsp 封裝 locale context是一個封裝了很多繪圖功能的對象。不支持低版本的IE。 <canvas width="500" height="500" id="clock" ></canva

第四講：使用html5中的canvas標籤畫出一個球在指定區域內的運動

<html> <head> <title>小球在一個區域運動</title> <script src="../js/jscex.jscexRequire.min.js" type="text/javascrip

用canvas畫布畫一個畫板

osi images 點擊下載 技術分享 sed asc rom range -s 　　前段時間，在對H5的回顧中突然對canvas有了感覺，閑來無事便對其進行了一些捯飭。這不，上周我還做了一個好玩的畫板呢，廢話不多說，直接上代碼(PS：翠花，上代碼~)： HTML部分：

js 利用canvas + flv.js實現 視頻流 截屏 、本地下載功能實現，兼容火狐，谷歌， 截屏跨域的坑

font 方案 function can 屬性和方法 load() com DG ren 1 本地視頻截屏（canvsa） 　　 <!DOCTYPE html> <html> <head> <meta charset=

結合js利用畫布制作一個時鐘

狀態 interval width 三角函數 ets i++ 分享 getc 小時 首先 搭建canvas畫布格式： 動態獲取畫布的寬和高方便變換，利用translate將圓中心坐標改為0 0； <canvas width="800px" heig

js使用canvas畫布畫太極圖案

程式碼如下： <body> <canvas id="mycanvas"></canvas> <script type="text/javascript"> v

運用canvas技術畫一個由內向外漸變的實心圓(javascript)

html <canvas id="canvas"></canvas> js var canvas = document.getElementById('

js利用object標籤顯示動態圖片

<BODY > <script type="text/javascript" language="javascript"> var fImgs = new Array(); fImgs[0] = {title:'第一張',img:'stu_1.g

js利用script標籤跨域請求

由於同源策略的限制，XmlHttpRequest只允許請求當同域下的資源， 而script標籤可以通過src屬性跨域訪問其他域的方法，我們可以利用這個特點進行跨域請求，例如 <script s

利用jdbc簡單封裝一個小框架（類似DBUtils）

add string url lar conn () 列名 lang con 利用jdbc寫的一個類似DBUtils的框架 package com.jdbc.orm.dbutils; import java.io.IOException; import java.io.

一個尖括號能幹什麽，畫一個笑臉開始（為了支持交互，它又增添了JavaScript。HTML頁面也越來越臃腫。於是CSS便誕生了。API和核心代碼的出現使HTML能夠訪問更復雜的軟件功能－－支持更高級的交互和雲服務集成。這就是今天的HTML5）

重要 htm 服務 廠商 inf web運行 ima 用戶 界面 一個尖括號 < 一個尖括號能幹什麽 < ? 你可以編出一頂帽子 <(:-p 或一張笑臉 :-> 再或者更直接一些 20世紀90年代初，html作為一種簡單標記語言面

一個尖括號能幹什麼，畫一個笑臉開始（為了支援互動，它又增添了JavaScript。HTML頁面也越來越臃腫。於是CSS便誕生了。API和核心程式碼的出現使HTML能夠訪問更復雜的軟體功能－－支援更高階的互動和雲服務整合。這就是今天的HTML5）

一個尖括號 < 一個尖括號能幹什麼 < ? 你可以編出一頂帽子 <(:-p 或一張笑臉 :-> 再或者更直接一些   20世紀90年代初，html作為一種簡單標記語言面世，用於在網際網路上顯示超文字。經過發展，html逐漸包含圖片和佈局設計功能。為了支援互動，

iOS 一個更完善的Swift倒計時按鈕（附後臺許可權申請）

一個更完善的Swift倒計時按鈕（附後臺許可權申請） 如今越來越多app使用手機號碼作為使用者名稱，其中總是要涉及到驗證碼的傳送。 倒計時按鈕實現關鍵點： 當前檢視控制器銷燬後倒計時計數的再恢復 不同頁面可能使用同一個倒計時計數 app進入後臺後

js 找出當前元素所包含的最後一個元素節點（不是文字節點）

elem.lastChild只能確保找出的是當前元素的最後一個節點，不能保證這個節點是元素節點還是文字節點。 為了確保找出的節點是當前元素的最後一個元素節點，可以如下寫： var elemChildren=elem.getElementByTagName("*"): if(

【程式語言】利用CImage類對影象畫素的處理（影象二值化）

    最近做的課程作業需要用到CImage函式處理影象，其中涉及到讀取影象以及對影象畫素進行操作，在這裡記錄一下自己的理解。    首先是CImage類的定義和讀取圖片 CImage srcImage; CImage dstImage; CString path = "

js獲取瀏覽器和設備相關width（屏幕的寬度）

view dev viewport document one size ini left cal 首先呢，我們將iPhone手機的相關數據表示如下 我們要理解很多東西，比如邏輯分辨率、物理分辨率、縮放因子、ppi等，這裏先不討論。 首先呢，我們先介紹下各個屏幕寬度： 網

用js來實現那些數據結構14（樹02-AVL樹）

PE 有一個 解決 講解 html 16px var map 操作 　　在使用二叉搜索樹的時候會出現 一個問題，就是樹的一條分支會有很多層，而其他的分支卻只有幾層，就像下面這樣： 　　如果數據量夠大，那麽我們在某條邊上進行增刪改查的操作時，就會消耗大量的時間。我們花費精力