Ⅰ 前端筆記 — 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編碼的圖片。