導航:首頁 > 圖片大全 > canvas畫的東西如何變成圖片

canvas畫的東西如何變成圖片

發布時間:2022-10-06 05:29:45

Ⅰ 前端筆記 — canvas

在HTML中添加<canvas>元素,必須設置width跟height屬性

如果瀏覽器不支持canvas元素,就會顯示標簽中間的內容
要在畫布上繪圖,需要取得繪圖上下文,調用getContext('2d')就可以取得canvas的2d上下文

使用toDataURL方法可以導出canvas上繪制的圖像,接受一個參數,圖像的MIME類型格式

常用的屬性控制

矩形是唯一一種可以直接在上下文中繪制的形狀
與矩形有關的方法包括fillRect()、strokeRect()和clearRect(),這三個方法接受4個參數(x, y, width, height)
fillRect()繪制的矩形會填充指定的顏色,顏色通過fillStyle屬性指定

strokeRect()繪制的矩形會使用指定的顏色描邊,描邊顏色通過strokeStyle屬性指定

clearRect()方法用於清除畫布上的矩形區域

要繪制路徑,首選必須調用beginPath()方法,表示開始繪制新路徑,繪制路徑主要有以下方法

調用closePath()可以將路徑的起點與終點連接。路徑完成後,可以使用fill()填充,或者使用stroke()描邊。最後還可以調用clip(),在路徑上創建一個剪切區域

繪制文本主要有兩個方法,fillText()和strokeText(),這個兩個方法接受4個參數:要繪制的文本字元串、x坐標、y坐標和可選的最大像素寬度。這兩個方法都以下列3個屬性為基礎

上下文提供了輔助確定文本大小的方法measureText(),這個方法接受一個參數,即要繪制的文本,返回一個TextMetrics對象,這個對象有一個width屬性,表示文本的寬度

為上下文應用變換,會導致使用不同的變換矩陣應用處理,從而產生不同的結果,可以通過如下方法來修改變換矩陣

如果想把一副圖像繪制到畫布上,可以使用drawImage()方法,調用這個方法時,可以使用三種不同的參數組合,最簡單的方式是傳入一個<img>元素,以及繪制該圖像的起點x和y坐標

可以多傳入兩個參數,表示目標寬度和高度

還可以把圖像中的某個區域繪制到上下文中,需要傳入9個參數:要繪制的圖像、源圖像的x坐標、源圖像的y坐標、源圖像的寬度、源圖像的高度、目標圖像的x坐標、目標圖像的y坐標、目標圖像的寬度、目標圖像的高度

除了給drawImage()方法傳入<img>元素外,還可以傳入另一個<canvas>元素作為其第一個參數。結合drawImage()和其他方法,可以對圖像進行各種基本操作,操作的結果可以通過toDataURL()方法獲得,toDataURL()是canvas的方法而不是上下文的方法

上下文會根據以下幾個屬性,自動為形狀或路徑繪制陰影,需要在繪制路徑之前設置

漸變有CanvasGradient實例表示,要創建一個新的線性漸變,可以調用createLinearGradient()方法,接受4個參數:startX、startY、endX、endY。創建漸變後,使用addColorStop()方法來指定色標,接受兩個參數:色標位置和css顏色值。色標位置是一個0(開始的顏色)到1(結束的顏色)之間的數字

表示從一個畫布上的點(30, 30)到點(70, 70)的漸變。起點的色標是白色,終點的色標是黑色。然後可以把fillStyle或者strokeStyle設置為這個對象,從而使用漸變來繪制形狀或描邊

要創建徑向漸變,可以使用createRadialGradient()方法,接受6個參數,對應著兩個圓的圓心和半徑

模式其實就是重復的圖像,可以用來填充或描邊圖像,使用createPattern()方法並傳入兩個參數:一個<img>元素和一個表示如何重復圖像的字元串。其中第二個參數的值與css的background-repeat屬性值相同,包括「repeat」、「repeat-x」、「repeat-y」和「no-repeat」

模式與漸變一樣,都是從畫布的原點(0, 0)開始的,將填充樣式設置為模式對象,只表示在某個特定的區域內顯示重復的圖像,而不是要從某個位置開始繪制重復圖像

上下文可以通過getImageData(x, y, width, height)取得原始圖像數據

這里返回的對象是ImageData的實例,每個ImageData對象都有三個屬性:width、height和data。其中data是一個數組,保存著圖像中每一個像素的數據。

在data數組中,每一個像素用4個元素來保存,分別表示紅、綠、藍和透明度。因此第一個像素的數據保存在數組的第0到第3個元素中,數組中的每個元素的值都介於0到255之間(包括0和255)
putImageData()方法可以將imageData表示的圖像繪制到畫布上

globalAlpha:用於指定所有繪制的透明度,是一個介於0到1之間的值,默認值為1
如果所有的後續操作都要基於相同的透明度,可以先把globalAlpha設置為適當的值,然後繪制

globalCompositionOperation:表示後繪制的圖形怎樣與先繪制的圖形結合,可能的值如下

Ⅱ HTML5如何通過canvas,把兩張圖片繪制到畫布,然後導出大圖

<imgsrc="......."id="img1"/>
<imgsrc="......."id="img2"/>
<imgid="img3"/>
varimg1=document.getElementById("img1"),
img2=document.getElementById("img2"),
img3=document.getElementById("img3");
varcanvas=document.createElement("canvas"),
context=canvas.getContext("2d");
canvas.width=img1.naturalWidth+img2.naturalWidth;
canvas.height=Math.max(img1.naturalHeight,img2.naturalHeight);

//將img1加入畫布
context.drawImage(img1,0,0,img1.naturalWidth,img1.naturalHeight);

//將img2加入畫布
context.drawImage(img1,img2.naturalWidth,0,img2.naturalWidth,img2.naturalHeight);

//將畫布內容導出
varsrc=canvas.toDataURL();
img3.src=src;
<p>drawImage的使用方法可以去這里看一下</p>
<ahref="https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/drawImage"/>

Ⅲ 在canvas畫布中如何載入圖片

<script>

      var Person = function(canvas){

        this.ctx = document.querySelector("canvas").getContext("2d");

        this.canvasWidth = this.ctx.canvas.width;

        this.canvasHeight = this.ctx.canvas.height;

        this.src = "image/04.png";

        this.init();

      }

      Person.prototype.init = function(){

        var that = this;

        this.loadImage(function(image){

          // 獲取圖片的寬高

          that.imageWidth = image.width;

          that.imageHeight = image.height;

          // 獲取單個小怪獸區域的寬高

          that.positionWidth = that.imageWidth / 4;

          that.positionHeight = that.imageHeight / 4;

          // 默認是從左上角顯示的

          that.x0 = that.canvasWidth / 2 - that.positionWidth / 2;

          that.y0 = that.canvasHeight / 2 - that.positionHeight / 2;

          // 繪制圖片

          that.ctx.drawImage(image, 0, 0, that.positionWidth, that.positionHeight, that.x0,

            that.y0, that.positionWidth, that.positionHeight);

        })

      }

      Person.prototype.loadImage = function(callback){

        var image = new Image();

        // 圖片載入完成後執行

        image.onload = function(){

          callback && callback(image);

        }

        image.src = this.src;

      }

      var person = new Person();

    </script>

三、繪制小人行走的幀動畫

<s<script>

        var Person = function(canvas){

          this.ctx = document.querySelector("canvas").getContext("2d");

          this.canvasWidth = this.ctx.canvas.width;

          this.canvasHeight = this.ctx.canvas.height;

          this.src = "image/04.png";

          this.init();

        }

        Person.prototype.init = function(){

          var that = this;

          this.loadImage(function(image){

            // 獲取圖片的寬高

            that.imageWidth = image.width;

            that.imageHeight = image.height;

            // 獲取單個小怪獸區域的寬高

            that.positionWidth = that.imageWidth / 4;

            that.positionHeight = that.imageHeight / 4;

            // 默認是從左上角顯示的

            that.x0 = that.canvasWidth / 2 - that.positionWidth / 2;

            that.y0 = that.canvasHeight / 2 - that.positionHeight / 2;

            // 繪制圖片

            that.ctx.drawImage(image, 0, 0, that.positionWidth, that.positionHeight, that.x0,

              that.y0, that.positionWidth, that.positionHeight);

            var index = 0;

            setInterval(function(){

              that.ctx.clearRect(0, 0, that.canvasWidth, that.canvasHeight);

              index++;

              that.ctx.drawImage(image, index * that.positionWidth, 0, that.positionWidth, that.positionHeight, that.x0, that.y0,<br> that.positionWidth, that.positionHeight);

              if(index >= 3){

                index = 0;

              }

            }, 100);

          })

        }

        Person.prototype.loadImage = function(callback){

          var image = new Image();

          // 圖片載入完成後執行

          image.onload = function(){

            callback && callback(image);

          }

          image.src = this.src;

        }

        var person = new Person();

      </script>

四、繪制疾走的小怪獸

可以通過鍵盤上下左右鍵控制小人在畫布中任意行走

nction(canvas){

        this.ctx = document.querySelector("canvas").getContext("2d");

        this.canvasWidth = this.ctx.canvas.width;

        this.canvasHeight = this.ctx.canvas.height;

        this.stepX = 0;

        this.stepY = 0;

        this.stepSize = 10;

        this.index = 0;

        this.direction = 0;

        this.src = "image/04.png";

        this.init();

      }

      Person.prototype.init = function(){

        var that = this;

        this.loadImage(function(image){

          // 獲取圖片的寬高

          that.imageWidth = image.width;

          that.imageHeight = image.height;

          // 獲取單個小怪獸區域的寬高

          that.positionWidth = that.imageWidth / 4;

          that.positionHeight = that.imageHeight / 4;

          // 默認是從左上角顯示的

          that.x0 = that.canvasWidth / 2 - that.positionWidth / 2;

          that.y0 = that.canvasHeight / 2 - that.positionHeight / 2;

          // 繪制圖片

          that.ctx.drawImage(image, 0, 0, that.positionWidth, that.positionHeight, that.x0,

            that.y0, that.positionWidth, that.positionHeight);

          var index = 0;

          document.onkeydown = function(e){

            that.ctx.clearRect(0, 0, that.canvasWidth, that.canvasHeight);

            switch(e.keyCode){

              case 37 :

                console.log('左');

                that.direction = 1;

                that.stepX--;

                that.showImage(image);

                break;

              case 38 :

                console.log('上');

                that.direction = 3;

                that.stepY--;

                that.showImage(image);

                break;

              case 39 :

                console.log('右');

                that.direction = 2;

                that.stepX++;

                that.showImage(image);

                break;

              case 40 :

                console.log('下');

                that.direction = 0;

                that.stepY++;

                that.showImage(image);

                break;

            }

          }

        })

      }

      Person.prototype.loadImage = function(callback){

        var image = new Image();

        // 圖片載入完成後執行

        image.onload = function(){

          callback && callback(image);

        }

        image.src = this.src;

      }

      Person.prototype.showImage = function(image){

        this.index++;

        console.log(this.index);

          this.ctx.drawImage(image, this.index * this.positionWidth, this.direction * this.positionHeight, this.positionWidth, this.positionHeight, this.x0 + this.stepX * this.stepSize, this.y0 + this.stepY * this.stepSize, this.positionWidth, this.positionHeight);

          if(this.index >= 3){

            this.index = 0;

          }

      }

      var person = new Person();

    </script>

深圳網站建設www.sz886.com

Ⅳ delphi 請問如何將Canvas對象里的繪制的東西保存為.jpg文件格式拜託了各位 謝謝

創建一個jpg對象,然後將canvas的內容復制到對象的canvas上

Ⅳ python的gui中畫布canvas怎樣才能把畫在畫布上的東西以圖片格式導出

圖片格式用截屏方式完成即可。

Ⅵ 怎樣點擊按鈕改變canvas中的圖片

點應用就是窗口不會消失,可以繼續做其它修改,點確定的話,窗口消失,如果想修改還要重新打開,點這兩個都是對當前的修改進行保存

Ⅶ 使用canvas如何全屏顯示圖片

我記得canvas有個畫圖片的方法canvas.drawBitmap(bgBmp, Rect, Rect, paint);你建個矩形對象,設置大小為屏幕大小至於怎麼設置為屏幕大小,一看矩形構造函數就應該明白了。主要是找對角點也就是0,0點和屏幕的右下方那點坐標。也就是屏幕的寬,高

Ⅷ canvas轉換為圖片的問題

JS Canvas與Image互相轉換
原文演示: JavaScript Canvas Image Conversion Demo
在上周的Mozilla Web開發 會議,最後我們花了大半天的時間討論未來的Mozilla市場應用。Instagram是近期最火爆的移動應用,以10億美元的天價賣給了FaceBook。
我不介意賺取一些外快,所以我決定創建一個Instagram樣式的應用(以後將會分享出來)

本文向您展示怎樣轉換Image為canvas,以及canvas如何提取出一個Image。

轉換 Image為 Canvas
要把圖片轉換為Canvas(畫板,畫布),可以使用canvas元素 context 的drawImage方法:

復制代碼
代碼如下:

// 把image 轉換為 canvas對象
function convertImageToCanvas(image) {
// 創建canvas DOM元素,並設置其寬高和圖片一樣
var canvas = document.createElement("canvas");
canvas.width = image.width;
canvas.height = image.height;
// 坐標(0,0) 表示從此處開始繪制,相當於偏移。
canvas.getContext("2d").drawImage(image, 0, 0);
return canvas;
}

轉換 Canvas 為 Image
假設圖像已經在canvas上處理好,那麼可以使用以下方法,把canvas轉變為圖片Image對象。

復制代碼
代碼如下:

// 從 canvas 提取圖片 image
function convertCanvasToImage(canvas) {
//新Image對象,可以理解為DOM
var image = new Image();
// canvas.toDataURL 返回的是一串Base64編碼的URL,當然,瀏覽器自己肯定支持
// 指定格式 PNG
image.src = canvas.toDataURL("image/png");
return image;
}

Ⅸ 在Canvas畫了一些東西之後,要把畫的結果保存為一張Bitmap上傳到伺服器,請問怎麼怎麼保存呀

http://www.w3school.com.cn/tags/html_ref_canvas.asp
翻到最後有一個方法叫toDataURL()。得到的是base64編碼的圖片。

閱讀全文

與canvas畫的東西如何變成圖片相關的資料

熱點內容
河南三輪車猥瑣小女孩圖片 瀏覽:125
ps圖片加文字怎麼去掉下劃線 瀏覽:880
word選擇正文如何不選擇圖片 瀏覽:817
圖片動漫火影忍者 瀏覽:212
瑜伽休息可愛卡通圖片 瀏覽:351
招聘話務員的圖片加文字 瀏覽:328
男生做業務發型圖片 瀏覽:652
男生體脂23圖片 瀏覽:427
大美女洗澡圖片 瀏覽:498
短發發型怎麼打理圖片 瀏覽:268
劉德華吻戲圖片大全 瀏覽:471
特斯拉皮膚價格圖片大全 瀏覽:490
紅色豬手機壁紙高清圖片 瀏覽:543
可愛毛絨玩具圖片大全 瀏覽:629
今日頭條創作靈感討論怎麼放圖片 瀏覽:900
廣州小蠻腰高清圖片大全可保存 瀏覽:597
西青道高清圖片大全 瀏覽:653
簡單水果古風畫手繪圖片 瀏覽:757
哭著也要跳完的小女孩圖片 瀏覽:840
圖片如何匹配字 瀏覽:920