有关Canvas的一点小事—图像绘制
生活随笔
收集整理的這篇文章主要介紹了
有关Canvas的一点小事—图像绘制
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1、? 使用canvas繪制圖像
什么是圖像？在js中它就是一個<img src=””>，<img>有兩種接收圖像信息的方法，一個是直接鏈接到圖像地址，一個使用base64數據，不過這里討論的是canvas要使用的Image對象。我們有兩個方式定義：
<1>在html中定義好，然后根據id獲取
var img=document.getElementById("scream");?
<2>新建image對象
var img = new Image();img.onload = function(){//在這里面進行對圖像對象的操作 ctx.drawImage(img,0,0); };img.src = 'img/6.png';?
得到img對象后，我們有三種方式在canvas上繪制你想要的圖像。
<1>只定義開始繪制的坐標，圖像的寬和高取決于原圖像文件的大小
? ? ? ? ? ? ? ??
ctx.drawImage(img,10,10);//***第一種，三個參數分別是Image,繪制開始的x,y?
?<2>定義開始的坐標，和繪制的寬和高
? ? ? ? ? ? ? ? ? ?
ctx.drawImage(img,100,100,width,height);//***第二種，三個參數分別是Image,繪制開始的x,y和拉伸的寬度高度?
<3>切割原圖片，并繪制到canvas的制定位置
? ? ? ? ? ? ??
ctx.drawImage(img,sx,sy,sw,sh,200,80,sw,sh);//***第三種，三個參數分別是Image,切割原圖的開始坐標和寬高，繪制開始的x,y和拉伸的寬度高度?附完整的代碼：
??????????
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"/> <script src='js/jquery-3.3.1.min.js'></script><style>body{background:black;text-align:center;}#myCanvas{background:white;}#contain{width:100%;height:600px;}#scream{width:100%;}</style></head> <body> <img src="img/7.png" id="scream" hidden><div id="contain"><canvas id="myCanvas"></canvas></div><script type="text/javascript"> $(document).ready(function(){var contain = document.getElementById('contain');var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");c.width=contain.offsetWidth;c.height=contain.offsetHeight;//***根據容器大小設置寬和高/*從dom元素中獲取圖像*/var img=document.getElementById("scream");ctx.drawImage(img,10,10);//***第一種，三個參數分別是Image,繪制開始的x,yvar width = img.width;/*新建一個圖像元素*/var img = new Image();img.onload = function(){var sw = img.width;var sh = img.height;var height = width*sh*1.0/sw;ctx.drawImage(img,100,100,width,height);//***第二種，三個參數分別是Image,繪制開始的x,y和拉伸的寬度高度var sx = sw-width;var sy = sh-height;ctx.drawImage(img,sx,sy,sw,sh,200,80,sw,sh);//***第三種，三個參數分別是Image,切割原圖的開始坐標和寬高，繪制開始的x,y和拉伸的寬度高度/*后面設置的是原圖的寬和高，并不是切割出來的部分的寬和高，需要轉換*/};img.src = 'img/6.png';//*這個圖像請比第一個大一點，最好大很多 });</script> </body> </html> canvas繪制圖像?
????????
?
?
?
?
參考：
Js中獲取各種寬度高度的問題：
https://www.cnblogs.com/wangkongming/p/6195903.html
?
?
轉載于:https://www.cnblogs.com/liwxmyself/p/10267012.html
總結
以上是生活随笔為你收集整理的有关Canvas的一点小事—图像绘制的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【js】数组置空的其他方式及使用场景
- 下一篇： 五大主流浏览器及内核