canvas——绘制图片——动图制作
生活随笔
收集整理的這篇文章主要介紹了
canvas——绘制图片——动图制作
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
圖片：
drawImage()：將原圖片像素的內容復制到畫布上；
第一個參數是源圖片，可以是img元素或Image構造函數創建的屏幕外圖片對象；
三個參數時： 指定圖片繪制的x、y坐標；
五個參數時： 指定圖片繪制的x、y坐標，以及圖片的寬度、高度；
九個參數時： 裁剪的對象 裁剪的位置（x,y）; 裁剪的寬度和高度(w,h); 裁剪后圖片繪制的位置(x,y); 圖片顯示出來的寬度和高度(w,h);
第一個參數是源圖片，可以是img元素或Image構造函數創建的屏幕外圖片對象；
就意味著不能放圖片的地址，不然是不能夠繪制的，我們需要把圖片加載出來然后再在canvas畫板中繪制
eg：ctx.drawImage("./src/h5.png")（這樣的代碼就是錯誤的）
eg：
var img1=new Image()img1.src="./src/h5.png"img1.onload=function(){ctx.drawImage(img1,100,100)}這樣才是正確的寫法（推薦）
當然還有一種寫法就是直接在body里面寫img標簽，然后再js代碼中去獲取，但是在頁面中就會顯示，并且還需要采用onload函數里面寫（），因為js代碼必須要在img標簽加載好了之后才能獲取
動圖的制作：
代碼思路：
在計時器里面加載圖片（精靈圖），然后在圖片上裁剪不同的位置，顯示在canvas畫布上
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>Document</title> </head> <style>#box {border: 1px black solid;} </style><body><!-- <img src="./img/h.png" alt=""> --><canvas id="box" height="700" width="700"> </canvas><script>/** @type {HTMLCanvasElement} */var canvas = document.querySelector("#box")var ctx = canvas.getContext("2d")var img1=new Image()img1.src="./img/h.png"img1.onload=function(){var n=0setInterval(()=>{canvas.width=canvas.widthn++,n=n%10,ctx.drawImage(img1,0+n*108,0,108,101,300,300,108,101)},200)}</script> </body></html>n=n%10保證了n的取值范圍，使得裁剪的范圍不會超過圖片的大小，然后每次計時器調用之前會先清空畫布
總結
以上是生活随笔為你收集整理的canvas——绘制图片——动图制作的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 用墨刀创建原型图的心得
- 下一篇： android时钟需求分析,电子时钟设计