2. 程式人生 > >分享一下簡單的 canvas 翻角效果

分享一下簡單的 canvas 翻角效果

阿新 • • 發佈：2019-02-07

對於翻角效果的難點在於沒有翻開的時候露出的是dom下面的內容，實現角度來說純dom + css動畫的設計方案並沒有相出一個好的對策： 於是撿起了好久之前學的入門級別的canvas （如果想了解更多的學習資源可以加QQ2832281573）

下面說一下實現思路。

動畫拆分

  • 將此動畫分解成兩部分，一部分是翻頁出現的黑色三角區域，另一個是露出的橘色展示內容

  • 對於橘色的展示內容區域相對好一些，因為是一個規則圖形，而黑色區域相對較難

先從基礎canvas使用方法說起

  1. <divclass="container">
  2. <canvasclass
     
    ="myCanvas"width="100"height="100"></canvas>
  3. </div>

佈局如上，這裡要說一點踩過的坑是，canvas必須要設定上width 與 height，此處並非為css中的width與height，而是寫在dom上的屬性。 因為dom上的width與height標識了canvas的解析度(個人理解)， 所以此canvas畫布解析度為100*100，而展示尺寸是可以通過css控制。

js中首先要做的是獲取canvas物件

  1. var canvas = document.querySelector('.myCanvas');//獲取canvas對應dom
     
  2. var ctx = canvas.getContext('2d');//此方法較為基礎 , 意為獲取canvas繪畫2d內容的工具(上下文)
  3. var cw =100;//解析度 , 其實直接從dom上獲取可能更好些
  4. var ch =100;//解析度 , 其實直接從dom上獲取可能更好些

ctx這個繪畫上下文在這個教程中起到的作用至關重要，它提供了非常強大的api，比如用於畫線、填充、寫文字等，這樣看來理解為畫筆會更為簡明一些。

此處效果需要用到的api如下（不做詳細解釋，可w3c自行查詢）：

  1.     ctx.save()//儲存上下文狀態 (比如畫筆尺寸 顏色 旋轉角度)
  2.     ctx.restore()
     
    //返回上次儲存的上下文狀態
  3.     ctx.moveTo(x,y)//上下文移動到具體位置
  4.     ctx.lineTo(x,y)//上下文以劃線的形式移動到某位置
  5.     ctx.stroke()// 畫線動作
  6.     ctx.quadraticCurveTo()//上下文(畫筆)按貝塞爾曲線移動(簡單理解為可控的曲線即可)
  7.     ctx.arc()//畫圓
  8.     ctx.beginPath()//開啟新的畫筆路徑
  9.     ctx.closePath()//關閉當前畫筆路徑
  10.     ctx.createLinearGradient()//建立canvas漸變物件
  11.     ctx.fill()//對閉合區域進行填充
  12.     ctx.globalCompositeOperation //畫筆的重疊模式

可能方法列舉的不夠詳盡，見諒。

首先是繪製黑色翻出的部分，圖形分解為如下幾部分(請根據上圖腦補)：

  1. 左上角向右下的半弧 ╮

  2. 然後是豎直向下的豎線 |

  3. 然後是向右的半圓 ╰

  4. 再然後是向右的橫線

  5. 接著還是向右下的半弧 ╮

  6. 最後是將線連線會起點

於是第一步 我們要先將畫筆移動到起始位置：

  1.        ctx.moveTo(50,0);

然後

  1.     ctx.quadraticCurveTo(55,5,55,25);// 可以理解為從(50,0)這個點劃線到(55,25)這個點，中間會受到(55,5)這個點將直線想磁鐵一樣"吸"成曲線

於是第一個向右下的半弧完成，此時canvas上沒有任何繪製內容，因為還沒有執行過繪製方法例如stroke或fill。

接下來直線向下就是簡單的移動：

  1.     ctx.lineTo(55,40);

這個時候我們接下來應該畫向右的半圓，這個時候再用貝塞爾曲線繪製實在有些不太合適，因為從圖上來看，這裡完全是1/4的圓，所以要使用canvas提供的畫圓的api。

  1.     ctx.arc(60,40,5,Math.PI ,Math.PI /2,true);

上述畫圓的程式碼意為：以(60,40)點為圓心，5為半徑，逆時針從180度繪製到90度，180度就是圓心的水平向左 到達點(55,40)，與上一步連線上，然後又因為螢幕向下為正，90度在圓心正下方，所以繪製出此半圓。

於是按照相同的步驟，水平向右：

  1. 
            
      
    
           
    
              
              
    
            
    
            
    相關推薦
    
			   
            
            
            
 

    

    
    
    
    分享一下簡單的 canvas 翻角效果
    
     
     
                



對於翻角效果的難點在於沒有翻開的時候露出的是dom下面的內容，實現角度來說純dom + css動畫的設計方案並沒有相出一個好的對策： 於是撿起了好久之前學的入門級別的canvas
（如果想了解更多的學習資源可以加QQ2832281573）

下面說一下實 
    

    
  
 

    

    
    
    
    簡單的 canvas 翻角效果
    
     
     狀態   返回   math   hid   key   cde   圖形   -s   ria   
<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <me 
    

    
  
 

    

    
    
    
    js簡單翻頁效果邏輯例項
    
     
     
                <!DOCTYPE html><html><head><meta charset="UTF-8"><title></title>  </head><style type="text/cs 
    

    
  
 

    

    
    
    
    用canvas和js畫了個鐘錶，跟大家分享一下
    
     
     
                
<pre name="code" class="javascript">(function () {
var mycanvas=document.getElementById("mycanvas");
var otex=mycanvas.getContext(" 
    

    
  
 

    

    
    
    
    前端 H5 Canvas 實現了一下水波圖 水波紋效果
    
     
     
                編者按：本文由 止戰之殤 發表於掘金，並已授權奇舞週刊轉載



在專案中自己使用 Canvas 實現了一下水波圖，在這裡給大家分享一下它的實現原理。 一開始看到波浪，可能不知道從何入手，我們來看看波浪的特徵就會有靈感了。



沒錯，有人肯定會想到，就是 正餘弦曲線！對於波 
    

    
  
 

    

    
    
    
    做出一個SwitchButton的效果，並詳細學習一下onDraw(Canvas canvas)方法的使用
    
     
     
                
程式碼的靈感和原理主要來自於 http://blog.csdn.net/singwhatiwanna/article/details/9254309這篇文章！
1.效果
iphone上有開關控制元件，很漂亮，其實android4.0以後也有switch控制元件，但是隻能用在 
    

    
  
 

    

    
    
    
    js：簡單的拖動效果
    
     
     p s   move   ntb   rec   cti   release   樣式   left   eve   


效果演示：https://jsfiddle.net/dwqs/b5ywws9f/embedded/result/

html:

<div class="w 
    

    
  
 

    

    
    
    
    銅板街1--TextSwitcher實現文字上下翻牌效果
    
     
     .net   etc   nbsp   -1   ice   del   net   urn   .get   
 tvNotice = (TextSwitcher)rootView.findViewById(R.id.tv_notice);  
 tvNotice.setFactory(new ViewSw 
    

    
  
 

    

    
    
    
    簡單的跑馬燈效果（輪播圖）
    
     
     font   script   meta   圖片   ive   abs   height   單單   none   邏輯簡介：想要圖片或者是文字向左移動，那肯定得用到定時器，那麽移動那就必然是距離左邊的left值在改變；核心問題就是通過定時器來改變ul距離left的值；本姑娘就是簡簡單單直直接接，上代碼 
    

    
  
 

    

    
    
    
    [CSS揭秘]切角效果
    
     
     linear   都是   spa   osi   圖案   mage   alt   圓角   bsp   將角切掉也是一種流行的設計風格
傳統解決方案可能是使用三角形或者其他形狀的圖片來蓋住邊角從而模擬切角效果
有了CSS3,我們完全可以使用新技術來實現
第一種方案: CSS漸變
需求一: 一個矩 
    

    
  
 

    

    
    
    
    企業網站優化如何從簡單中挖掘優化效果
    
     
     問題   打開   程序   加工   優化   網站   相關   更多   作用   　　實際上說到企業網站的搜索引擎優化，在優化圈子裏面是相對簡單的事情，因為百度自身往往對企業網站相對看中，收錄速度快，而且也更願意提升企業網站的排名，這一點在百度推出官網計劃之後，就更加明顯，因為這是百度提升自身用戶體驗 
    

    
  
 

    

    
    
    
    給大家分享一下------mysql的優化
    
     
     對數   phantom   狀態   表級鎖   部分   鎖機制   單獨   常量   行記錄    
 
 
 
 
 
 
 
 
MySQL 優化專題拓展                         
 
--王耀宇
 
 
 
 
 
一、SQL優化
 
1、分析和定位策略
 
1、通過 s 
    

    
  
 

    

    
    
    
    iOS 相似淘寶商品詳情查看翻頁效果的實現
    
     
     nim   anim   bool   with   animate   resource   tlab   更改   tro   
        基本思路： 
1、設置一個 UIScrollView 作為視圖底層，而且設置分頁為兩頁 
2、然後在第一個分頁上加入一個 UITableView 而且設置表格 
    

    
  
 

    

    
    
    
    才發現用git Gui也能上傳項目到gitHub，下面分享一下經驗
    
     
     -1   輸入   創建   creat   用戶   new   sdn   png   發現   先到官方下載git客戶端，windows系統到這個地址：https://git-for-windows.github.io/
下面說一下上傳本地項目的步驟

先在自己的github網頁上新建一個倉庫，什麽都不 
    

    
  
 

    

    
    
    
    邊框折角效果
    
     
     height   html   utf-8   效果   absolute   none   isp   opened   pre   

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta ch 
    

    
  
 

    

    
    
    
    記錄一下ionic canvas圖片
    
     
     see   div   canvas   文本   更改   參考   cPage   nts   pri   
import { Component, Inject, forwardRef } from ‘@angular/core‘;
import { IonicPage, NavController,  
    

    
  
 

    

    
    
    
    JavaScript實現最簡單的拖拽效果
    
     
     stop   效果展示   title   另存為   -h   通過   沒有   軟件   .cn   一、一些無關痛癢的嘮叨
拖拽還是挺不錯的一個頁面效果，我個人認為，其生命力在於可以讓用戶自己做一些操作，所謂自定義。例如：
①瀏覽器標簽順序的拖拽切換
現在基本上所有的選項卡式的瀏覽器都有順序拖拽切換的 
    

    
  
 

    

    
    
    
    更新——Canvas畫布動畫效果之實現倒計時
    
     
     判斷   大神   radius   希望   日期   ~~   width   radi   多少   Hello，大家好！
小W復活啦！繼續歡樂的給大家更博，輸送新知識~~
不開玩笑啦！秒進正題~~~
上次更博，小W給大家介紹了Canvas畫布的基礎部分，以及實現了一個由7*10點陣圖顯示的倒計時的基本 
    

    
  
 

    

    
    
    
    JQ 簡單動畫顯示隱藏效果
    
     
     utf-8   border   head   ack   ext   char   body   toggle   pad   一、概括
jq的顯示隱藏動畫總共有：
普通顯示隱藏效果主要用了hide、show、toggle
淡入淡出主要用到了fadeIn、fadeOut、fadeToggle
滑動效果主要用 
    

    
  
 

    

    
    
    
    最近實現的一個分離文章內容功能，挺有意思，分享一下
    
     
     速度   ##   所有   空字符串   產品需求   其他   tle   流程圖   可讀性   這個功能的描述是：

把一本符合markdown語法寫的書裏面的所有大章節裏面內容的每個大標題和該標題對應下的內容做分離，一 一對應。

一般會出現這種問題的場景：

筆試算法題
產品需求

舉個例子，有一