canvas實(shí)用手冊(cè)

手冊(cè)地址

canvas API比較簡(jiǎn)單

var canvas = document.getElementById("jCanvas");
canvas.width = 1024;    //設(shè)置寬高比較好的方法[盡量不要再CSS中設(shè)置]
canvas.height = 768;

context是主要的操作對(duì)象

var context = canvas.getContext('2d');

劃線操作

context.beginPath();//開啟一個(gè)封閉的畫圖環(huán)境與closePath配對(duì)使用(這里邊使用的畫筆都是局部變量)
context.moveTo(x1,y1);//畫筆移動(dòng)到一個(gè)點(diǎn)
context.lineTo(x2, y2);//畫筆與前一個(gè)點(diǎn)的連線
context.fillStyle = "#60ADC2";//填充顏色
context.strokeStyle = "#60ADC2";//筆觸顏色
context.lineWidth = 10;//筆觸粗細(xì)
context.closePath();
context.fill();//涂鴉[這樣的順序可以體現(xiàn)出真正的圖形寬度]
context.stroke();//描邊

畫圓弧

/**
 * centerX:圓心坐標(biāo)
 * centerY:
 * radius:半徑
 * startAngle:開始弧度[Math.PI弧度]
 * endAngle:結(jié)束弧度
 * anticlockwise:順時(shí)針-逆時(shí)針[默認(rèn)順時(shí)針方向?yàn)檎较騗
 */
context.arc(centerX, centerY, radius, startAngle, endAngle, anticlockwise);
//eg
context.arc(centerX, centerY, radius, startAngle, 2 * Math.PI * (i + 1)/6, anticlockwise);

畫矩形的接口[僅畫路徑]

context.rect(x, y, width, height);

畫矩形[包括路徑筆觸]

context.strokeRect(x, y, width, height);

畫矩形[填充矩形]

context.fillRect(x, y, width, height);

線段端點(diǎn)處樣式

lineCap.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>lineCap</title>
    <link rel="stylesheet" href="lineCap.css">
</head>
<body>
    <canvas id="jCanvas" width="1024" height="768" class="canvas"></canvas>
    <script src="lineCap.js"></script>
</body>
</html>

lineCap.css

.canvas{display: block;margin: 100px auto;border: 1px solid #aaa;}

lineCap.js

/*
 * 屬性：lineCap
 * 屬性值：butt(default)//一條平滑的邊在線段的兩邊
 * 屬性值：round    //兩端是圓滑的接口
 * 屬性值：square   //突出一塊，記得要有參考線
 */
var canvas = document.getElementById("jCanvas");
var context = canvas.getContext('2d');

//參考線
context.beginPath();
context.strokeStyle = "#AAAAAA";
context.lineWidth = 1;
context.moveTo(200, 50);
context.lineTo(200, 800);
context.stroke();

context.moveTo(800, 50);
context.lineTo(800, 800);
context.stroke();
context.closePath();

context.lineWidth = 10;
context.strokeStyle = "teal";
context.beginPath();
context.moveTo(200, 100);
context.lineTo(800, 100);
context.lineCap = "butt";
context.stroke();
context.closePath();

context.beginPath();
context.moveTo(200, 400);
context.lineTo(800, 400);
context.lineCap = "round";
context.stroke();
context.closePath();

context.beginPath();
context.moveTo(200, 600);
context.lineTo(800, 600);
context.lineCap = "square";
context.stroke();
context.closePath();

線段連接處樣式

lineJoin.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>lineJoin</title>
    <link rel="stylesheet" href="lineJoin.css">
</head>
<body>
    <canvas id="jCanvas" width="1024" height="768" class="canvas"></canvas>
    <script src="js/lineJoin.js"></script>
</body>
</html>

lineJoin.css

.canvas{display: block;margin: 100px auto;border: 1px solid #aaa;}

lineJoin.js

/**
 * 屬性：lineJoin
 * 屬性值：miter(default)       直愣愣的有直角
 * 屬性值：bevel                攔腰把直角切斷
 * 屬性值：round                柔柔的小圓角
 * 關(guān)聯(lián)屬性：miterLimit          當(dāng)2條線比較靠近時(shí)，把該值調(diào)大可以得到很尖的角
 */
var canvas = document.getElementById("jCanvas");
var context = canvas.getContext('2d');
var R = 200;

context.beginPath();
context.lineJoin = "round";
for(var i=0; i<5; i++){
    context.lineTo(Math.cos((18 + 72*i)/180*Math.PI)*R + 300, -Math.sin((18+72*i)/180*Math.PI)*R + 300);
    context.lineTo(Math.cos((54 + 72*i)/180*Math.PI)*R/2 + 300, -Math.sin((54+72*i)/180*Math.PI)*R/2 + 300);
}
context.closePath();
context.lineWidth = 30;
context.strokeStyle = "teal";
context.stroke();

miterLimit.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>miterLimit</title>
    <link rel="stylesheet" href="miterLimit.css">
</head>
<body>
    <canvas id="jCanvas" width="1024" height="768" class="canvas"></canvas>
    <script src="miterLimit.js"></script>
</body>
</html>

miterLimit.css

.canvas{display: block;margin: 100px auto;border: 1px solid #aaa;}

miterLimit.js

/**
 * 屬性：lineJoin
 * 屬性值：miter(default)       直愣愣的有直角
 * 屬性值：bevel                攔腰把直角切斷
 * 屬性值：round                柔柔的小圓角
 * 關(guān)聯(lián)屬性：miterLimit          當(dāng)2條線比較靠近時(shí)，把該值調(diào)大可以得到很尖的角
 */
var canvas = document.getElementById("jCanvas");
var context = canvas.getContext('2d');

context.moveTo( 100, 100);
context.lineTo(300, 300);
context.lineTo(150, 100);
context.lineWidth = 30;
context.miterLimit = 100;
context.strokeStyle = "teal";
context.stroke();

圖形變換

/**
 * 位移translate(x, y)
 * 旋轉(zhuǎn)rotate(deg)
 * 縮放scale(sx, sy)
 * eg:
 * context.translate(x, y)                  注意：前后2個(gè)畫筆之間的效果會(huì)疊加
 * context.rotate(Math.PI * 90/180);        所采取的值為90度
 * context.scale(3.0, 2.0);                 放大必須在beginPath和closePath當(dāng)中，不然會(huì)全局放大
 * 要點(diǎn)：移動(dòng)必須在落筆之前
 */
context.translate(100, 100);//位置靠前是可以的
context.moveTo(0, 0);
context.lineTo(100, 100);
context.stroke();

圖形重合部分的處理

/**
 * 屬性：globalCompositeOperation
 * 屬性值：source-over后邊的圖像覆蓋前邊的圖像[兩者都會(huì)保留]
 *      source-atop后邊的圖像和前邊的圖像重合的部分和前邊圖像的全部保留
 *      source-in保留交集[覆蓋部分為后邊的部分]
 *      source-out保留后邊獨(dú)有的部分
 *      destination-over
 *      destination-atop
 *      destination-in
 *      destination-out
 *      lighter
 *      copy
 *      xor
 * 注意要在2個(gè)圖形之間
 */
context.globalCompositeOperation = "lighter";

context.fillStyle = "teal";
context.fillRect(50,50,300,300);

context.globalCompositeOperation = aText;

context.fillStyle = "pink";
context.fillRect(100,100,300,300);

字體屬性

/**
 * 屬性：textBaseline
 * 屬性值：
 *      top:頂部對(duì)齊
 *      middle：居中對(duì)齊
 *      bottom：底部對(duì)齊
 *      alphabetic：英文字母表格的對(duì)齊
 *      ideographic：底部對(duì)齊  中文的對(duì)齊方式
 *      hanging：頂部緊貼對(duì)齊
 */
context.fillStyle = "#058";
context.font = "bold 40px Microsoft Yahei";
context.textBaseline = "top";
context.fillText("top_abcdefghigklmnopqrstuvwxyz", 40, 100);

保存畫板的默認(rèn)設(shè)置

/**
 * context.save
 * context.restore就是一個(gè)畫板繪圖空間
 */
context.save();
context.fillStyle = "teal";
context.translate(100,100);
context.fillRect(0,0,300,185);
context.restore();

context.save();
context.fillStyle = "pink";
context.fillRect(200, 200 ,300, 185);
context.restore();

變換矩陣

/**
 * 變換矩陣
 * a c e
 * b d f
 * 0 0 1
 * a[水平縮放]1
 * b[水平傾斜]0
 * c[垂直傾斜]0
 * d[垂直縮放]1
 * e[水平位移]0
 * f[垂直位移]0
 */
transform(a,b,c,d,e,f)
setTransform(a,b,c,d,e,f)

線性漸變

var grd = context.createLinearGradient(xstart, ystart, xend, yend);
grd.addColorStop(stop, color);

var grd = context.createLinearGradient(0, 10, 60, 100);
grd.addColorStop(0, "teal");
grd.addColorStop(0.25, "#058");
grd.addColorStop(0.5, "pink");
grd.addColorStop(0.75, "blue");
grd.addColorStop(1, "purple");
context.fillStyle = grd;
context.fillRect(100,100,500,600);
context.stroke();

鏡像漸變

var grd = context.createRadialGradient(x0,y0,r0,x1,y1,r1);
grd.addColorStop(stop,color);

var grd = context.createRadialGradient(200,200,0,200,200,100);
grd.addColorStop(0,"#053");
grd.addColorStop(1,"teal");
context.fillStyle = grd;
context.arc(200,200,100,0,2*Math.PI);
context.fill();

創(chuàng)建背景

/**
 * createPattern
 * createPattern(img, repeat-style)
 * createPattern(canvas, repeat-style)
 * createPattern(video, repeat-style)
 * repeat-style:no-repeat
 *              repeat-x
 *              repeat-y
 *              repeat
 * 注意：必須在圖片加載完成后才能使用該方法
 */
var bg = new Image();//背景圖片
bg.src = "1.jpg";
bg.onload = function(){
    var pattern = context.createPattern(bg, "repeat");
    context.fillStyle = pattern;
    context.fillRect(0,0,300,300);
    context.stroke();
}

var newCanvas = document.createElement("canvas");//canvas
newCanvas.width = 100;
newCanvas.height = 100;
var newContext = newCanvas.getContext("2d");
newContext.arc(50,50,50,0,2*Math.PI);
newContext.fillStyle = "pink";
newContext.fill();

var pattern = context.createPattern(newCanvas, "repeat");
context.fillStyle = pattern;
context.fillRect(0,0,canvas.width,canvas.height);

fillStyle

fillStyle = color|gradient|image|canvas|video

畫弧(與2條直線相切的圓弧)

/**
 * context.arcTo(x1,y1,x2,y2,radius);
 * 注意：是3個(gè)點(diǎn)一個(gè)半徑確定一個(gè)弧，單獨(dú)的一個(gè)這是不顯示任何圖形的
 */
context.moveTo(150,150);
context.arcTo(650,150,650,650,100);
context.stroke();

二次曲線

/**
 * context.moveTo(x0,y0);
 * context.quadraticCurveTo(x1,y1,x2,y2)
 * 擴(kuò)充：可以學(xué)習(xí)下canvas和鼠標(biāo)交互的功能
 */

貝塞爾曲線

/**
 * context.moveTo(x0,y0);
 * context.bezierCurveTo(x1,y1,x2,y2,x3,y3);
 */
context.moveTo(50,50);
context.bezierCurveTo(100,150,500,250,300,350);
context.stroke();

文字渲染

/**
 * context.fillText(string, x, y,[maxlen])
 * context.strokeText(string, x, y,[maxlen])
 * 坐標(biāo)位置：渲染文字的左下角為坐標(biāo)基點(diǎn)
 * maxlen像素寬度，文字會(huì)被壓扁在里邊
 * fillStyle可以是圖片做成的pattern，制作成花色文字
 */
context.font = "bold 140px simsun";
context.fillStyle = "#058";
context.fillText("歡迎學(xué)習(xí)Canvas", 40,150);

font

/**
 * 默認(rèn)值："20px sans-serif"
 */
context.font = font-style|font-variant|font-weight|font-size|font-family
font-style = normal | italic(斜體字) | oblique(傾斜字體)
font-variant = normal | small-caps[都是大寫字母，第一個(gè)大寫字母正常，后邊的比第一個(gè)小一號(hào)]
font-weight = lighter|normal|bold|bolder|100,200,300,400(normal)|500,600,700(bold)|800,900
font-family = 支持@font-face | web安全字體

文字居中形式

/**
 * context.textAlign = left | center | right
 * 參考點(diǎn)：x坐標(biāo)為坐標(biāo)原點(diǎn)
 */
context.textAlign = "center";
context.fillText("歡迎學(xué)習(xí)Canvas", 300,280);

文本上下對(duì)齊方式

/**
 * context.textBaseline = top | middle | bottom | alphabetic | ideographic | hanging
 * 參考點(diǎn)：y坐標(biāo)為坐標(biāo)原點(diǎn)
 */

文本的度量[文字的像素寬度]

context.measureText(string).width

陰影

//注意：可文字，可矩形[放在繪制圖形之前]
context.font = "bold 40px simsun";
context.fillStyle = "#058";
context.shadowColor = "red";
context.shadowOffsetX = 8;
context.shadowOffsetY = 8;
context.shadowBlur = 8;
context.fillText("慕道班學(xué)員進(jìn)修中...", 280, 280);

透明度

context.globalAlpha = .5;

剪輯區(qū)域

/**
 * context.clip()
 * 路徑在下邊，上邊的路徑是剪輯的路徑
 */
var img = new Image();
img.src = "1.jpg";
img.onload = function(){
    context.arc(canvas.width/2,canvas.height/2,100,0,2*Math.PI,false);
    context.clip();
    context.fillStyle = context.createPattern(img, "repeat");
    context.fillRect(0,0,canvas.width,canvas.height);
}

非零環(huán)繞原則

從一點(diǎn)向外發(fā)射直線，如果方向的正反方向?yàn)?，則為圖形的外邊，非零則為圖形的里邊

/**
 * isPointInPath(x, y)
 * 判斷是否在繪制的路徑里邊
 */
context.isPointInPath(100,100);

繪制圖片

drawImage

  • context.drawImage(image, dx, dy)
  • context.drawImage(image, dx, dy, dw, dh)
  • context.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)
    參數(shù):
  • sx:圖片自身坐標(biāo)的橫坐標(biāo)
  • sy:圖片自身坐標(biāo)的縱坐標(biāo)
  • sw:圖片自身的寬度
  • sh:圖片自身的高度
  • dx:在目標(biāo)區(qū)域(畫布)上的橫坐標(biāo)
  • dy:在目標(biāo)區(qū)域(畫布)上的縱坐標(biāo)
  • dw:在目標(biāo)區(qū)域(畫布)上的寬度
  • dh:在目標(biāo)區(qū)域(畫布)上的高度
    ====
    離屏canvas就是把canvas畫到另一個(gè)canvas當(dāng)中

canvas坐標(biāo)轉(zhuǎn)換

  • event.clientX - canvas.getBoundingClientRect().left
  • event.clientY - canvas.getBoundingClientRect().top

獲取圖像像素

//屬性值：width | height | data
var imageData = context.getImageData(sx,sy,sw,sh);

設(shè)置元素像素

/**
 * dx,dy:目標(biāo)繪圖板的橫縱坐標(biāo)
 * dirtyX,dirtyY,dirtyWidth,dirtyHeight都是指的是原圖片的參數(shù)
 */
context.putImageData(image_data,dx,dy,dirtyX,dirtyY,dirtyWidth,dirtyHeight);

var canvas = document.getElementById("jCanvas");
var canvas2 = document.getElementById("jCanvas2");
var context = canvas.getContext('2d');
var context2 = canvas2.getContext('2d');

var image = new Image();
image.src = "1.jpg";
image.onload = function(){
    context.drawImage(image,0,0,image.width,image.height);
    var imageData2 = context.getImageData(0,0,canvas.width,canvas.height);
    context2.putImageData(imageData2,100,100,0,0,canvas2.width-100,canvas2.height-100);
}

元素像素級(jí)別的修改

/**
 * imageData.data該變量為引用變量不是基礎(chǔ)變量
 * 一個(gè)像素包括4個(gè)節(jié)點(diǎn):分別為r,g,b,a
 * 計(jì)算：pixelData[4*i+0]
 *     pixelData[4*i+1]
 *     pixelData[4*i+2]
 *     pixelData[4*i+3]
 */
var image = new Image();
image.src = "1.jpg";
image.onload = function(){
    context.drawImage(image,0,0,image.width,image.height);
    var imageData2 = context.getImageData(0,0,image.width,image.height);
    var pixelData = imageData2.data;
    for(var i=0;i<canvas2.width*canvas2.height;i++){
//      pixelData[4*i+0]=0;
//      pixelData[4*i+1]=0;
//      pixelData[4*i+2]=0;
//      pixelData[4*i+3]=200;
    }
    context2.putImageData(imageData2,0,0,0,0,canvas2.width,canvas2.height);
}

創(chuàng)建imageData

imageData = context.getImageData(x,y,w,h)
imageData = context.createImageData(w,h)
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 一、簡(jiǎn)介 HTML5 中的定義：“它是依賴分辨率的位圖畫布，你可以在 canvas 上面繪制任何圖形，甚至加載照片...
    destiny0904閱讀 10,832評(píng)論 1贊 4
  • 線條樣式 繪制直線，第五章知識(shí)簡(jiǎn)單回顧 lineWidth 設(shè)置或返回當(dāng)前的線條寬度，單位為像素 lineCap ...
    Zd_silent閱讀 551評(píng)論 0贊 0
  • 一：canvas簡(jiǎn)介 1.1什么是canvas？ ①：canvas是HTML5提供的一種新標(biāo)簽 ②：HTML5 ...
    GreenHand1閱讀 4,881評(píng)論 2贊 32
  • 沒接觸canvas的時(shí)候總感覺好難，接觸canvas之后感覺還行，其實(shí)挺簡(jiǎn)單的。其實(shí)學(xué)習(xí)前端沒有什么難的，只要我們...
    愛琴寶閱讀 670評(píng)論 0贊 0
  • canvas 畫布的流程寫法:最簡(jiǎn)單的寫法 1:需要在項(xiàng)目中創(chuàng)建canvas.并給與寬高 2:canvas是依賴于...
    5034af144007閱讀 328評(píng)論 5贊 1

友情鏈接更多精彩內(nèi)容