html5 canvas 詳細(xì)使用教程
更新時(shí)間：2017年01月20日 15:28:42 作者：59580
本文主要對(duì)html5 canvas的使用進(jìn)行了詳細(xì)的介紹。具有一定的參考價(jià)值，下面跟著小編一起來看下吧
話不多說，請(qǐng)看代碼
<!DOCTYPE html ">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
function draw21(id) {
var canvas = document.getElementById(id)
if (canvas == null)
return false;
var context = canvas.getContext("2d");
//實(shí)踐表明在不設(shè)施fillStyle下的默認(rèn)fillStyle=black
context.fillRect(0, 0, 100, 100);
//實(shí)踐表明在不設(shè)施strokeStyle下的默認(rèn)strokeStyle=black
context.strokeRect(120, 0, 100, 100);
//設(shè)置純色
context.fillStyle = "red";
context.strokeStyle = "blue";
context.fillRect(0, 120, 100, 100);
context.strokeRect(120, 120, 100, 100);
//設(shè)置透明度實(shí)踐證明透明度值>0,<1值越低，越透明，值>=1時(shí)為純色，值<=0時(shí)為完全透明
context.fillStyle = "rgba(255,0,0,0.2)";
context.strokeStyle = "rgba(255,0,0,0.2)";
context.fillRect(240,0 , 100, 100);
context.strokeRect(240, 120, 100, 100);
}
function draw22(id) {
var canvas = document.getElementById(id)
if (canvas == null)
return false;
var context = canvas.getContext("2d");
//實(shí)踐表明在不設(shè)施fillStyle下的默認(rèn)fillStyle=black
context.fillRect(0, 0, 100, 100);
//實(shí)踐表明在不設(shè)施strokeStyle下的默認(rèn)strokeStyle=black
context.strokeRect(120, 0, 100, 100);
//設(shè)置純色
context.fillStyle = "red";
context.strokeStyle = "blue";
context.fillRect(0, 120, 100, 100);
context.strokeRect(120, 120, 100, 100);
//設(shè)置透明度實(shí)踐證明透明度值>0,<1值越低，越透明，值>=1時(shí)為純色，值<=0時(shí)為完全透明
context.fillStyle = "rgba(255,0,0,0.2)";
context.strokeStyle = "rgba(255,0,0,0.2)";
context.fillRect(240, 0, 100, 100);
context.strokeRect(240, 120, 100, 100);
context.clearRect(50, 50, 240, 120);
}
function draw23(id) {
var canvas = document.getElementById(id);
if (canvas == null) {
return false;
}
var context = canvas.getContext('2d');
var n = 0;
//左側(cè)1/4圓弧
context.beginPath();
context.arc(100, 150, 50, 0, Math.PI/2 , false);
context.fillStyle = 'rgba(255,0,0,0.25)';
context.fill();
context.strokeStyle = 'rgba(255,0,0,0.25)'
context.closePath();
context.stroke();
//右側(cè)1/4圓弧
context.beginPath();
context.arc(300, 150, 50, 0, Math.PI/2 , false);
context.fillStyle = 'rgba(255,0,0,0.25)';
context.fill();
context.strokeStyle = 'rgba(255,0,0,0.25)';
context.closePath();
context.stroke();
}
function draw0(id) {
var canvas = document.getElementById(id);
if (canvas == null) {
return false;
}
var context = canvas.getContext('2d');
context.beginPath();
context.arc(200, 150, 100, 0, Math.PI * 2, true);
//不關(guān)閉路徑路徑會(huì)一直保留下去，當(dāng)然也可以利用這個(gè)特點(diǎn)做出意想不到的效果
context.closePath();
context.fillStyle = 'rgba(0,255,0,0.25)';
context.fill();
}
function draw1(id) {
var canvas = document.getElementById(id);
if (canvas == null)
return false;
var context = canvas.getContext("2d");
context.fillStyle = "#EEEEFF";
context.fillRect(0, 0, 400, 300);
var n = 0;
var dx = 150;
var dy = 150;
var s = 100;
context.beginPath();
context.fillStyle = 'rgb(100,255,100)';
context.strokeStyle = 'rgb(0,0,100)';
var x = Math.sin(0);
var y = Math.cos(0);
var dig = Math.PI / 15 * 11;
for (var i = 0; i < 30; i++) {
var x = Math.sin(i * dig);
var y = Math.cos(i * dig);
context.lineTo(dx + x * s, dy + y * s);
}
context.closePath();
context.fill();
context.stroke();
}
function draw2(id) {
var canvas = document.getElementById(id);
if (canvas == null) {
return false;
}
var context = canvas.getContext("2d");
context.fillStyle = "#EEEFF";
context.fillRect(0, 0, 400, 300);
var n = 0;
var dx = 150;
var dy = 150;
var s = 100;
context.beginPath();
context.globalCompositeOperation = 'and';
context.fillStyle = 'rgb(100,255,100)';
var x = Math.sin(0);
var y = Math.cos(0);
var dig = Math.PI / 15 * 11;
context.moveTo(dx, dy);
for (var i = 0; i < 30; i++) {
var x = Math.sin(i * dig);
var y = Math.cos(i * dig);
context.bezierCurveTo(dx + x * s, dy + y * s - 100, dx + x * s + 100, dy + y * s, dx + x * s, dy + y * s);
}
context.closePath();
context.fill();
context.stroke();
}
function draw24(id) {
var canvas = document.getElementById(id);
if (canvas == null) {
return false;
}
var context = canvas.getContext("2d");
context.moveTo(50, 50);
context.bezierCurveTo(50, 50,150, 50, 150, 150);
context.stroke();
context.quadraticCurveTo(150, 250, 250, 250);
context.stroke();
}
function draw25(id) {
var canvas = document.getElementById(id);
if (canvas == null)
return false;
var context = canvas.getContext('2d');
var g1 = context.createLinearGradient(0, 0, 0, 300);
g1.addColorStop(0, 'rgb(255,0,0)'); //紅
g1.addColorStop(0.5, 'rgb(0,255,0)');//綠
g1.addColorStop(1, 'rgb(0,0,255)'); //藍(lán)
//可以把lg對(duì)象理解成GDI中線性brush
context.fillStyle = g1;
//再用這個(gè)brush來畫正方形
context.fillRect(0, 0, 400, 300);
}
function draw3(id) {
var canvas = document.getElementById(id);
if (canvas == null)
return false;
var context = canvas.getContext('2d');
var g1 = context.createLinearGradient(0, 0, 0, 300);
g1.addColorStop(0,'rgb(255,255,0)');//淺綠
g1.addColorStop(1,'rgb(0,255,255)');//淺藍(lán)
context.fillStyle = g1;
context.fillRect(0, 0, 400, 300);
var n = 0;
var g2 = context.createLinearGradient(0, 0, 300, 0);
g2.addColorStop(0, 'rgba(0,0,255,0.5)');//藍(lán)色
g2.addColorStop(1, 'rgba(255,0,0,0.5)');//紅色
for (var i = 0; i < 10; i++) {
context.beginPath();
context.fillStyle = g2;
context.arc(i * 25, i * 25, i * 10, 0, Math.PI * 2, true);
context.closePath();
context.fill();
}
}
function draw26(id) {
//同一個(gè)圓心畫球型
/*var canvas = document.getElementById(id);
if (canvas == null)
return false;
var context = canvas.getContext('2d');
var g1 = context.createRadialGradient(200, 150, 0, 200, 150, 100);
g1.addColorStop(0.1, 'rgb(255,0,0)');
g1.addColorStop(1, 'rgb(50,0,0)');
context.fillStyle = g1;
context.beginPath();
context.arc(200, 150, 100, 0, Math.PI * 2, true);
context.closePath();
context.fill();*/
//不同圓心看徑向漸變模型
var canvas = document.getElementById(id);
if (canvas == null)
return false;
var context = canvas.getContext('2d');
var g1 = context.createRadialGradient(100, 150, 10, 300, 150, 50);
g1.addColorStop(0.1, 'rgb(255,0,0)');
g1.addColorStop(0.5, 'rgb(0,255,0)');
g1.addColorStop(1, 'rgb(0,0,255)');
context.fillStyle = g1;
context.fillRect(0, 0, 400, 300);
}
function draw27(id) {
var canvas = document.getElementById(id);
if (canvas == null)
return false;
var context = canvas.getContext('2d');
context.shadowOffsetX = 10;
context.shadowOffsetY = 10;
context.shadowColor = 'rgba(100,100,100,0.5)';
context.shadowBlur = 1.5;
context.fillStyle = 'rgba(255,0,0,0.5)';
context.fillRect(100, 100, 200, 100);
}
function draw4(id) {
var canvas = document.getElementById(id);
if (canvas == null)
return false;
var context = canvas.getContext('2d');
var g1 = context.createRadialGradient(400, 0, 0, 400, 0, 400);
g1.addColorStop(0.1, 'rgb(255,255,0)');
g1.addColorStop(0.3, 'rgb(255,0,255)');
g1.addColorStop(1, 'rgb(0,255,255)');
context.fillStyle = g1;
context.fillRect(0, 0, 400, 300);
var n = 0;
// var g2 = context.createRadialGradient(250, 250, 0, 250, 250, 300);
// g2.addColorStop(0.1, 'rgba(255,0,0,0.5)');
// g2.addColorStop(0.7, 'rgba(255,255,0,0.5)');
// g2.addColorStop(1, 'rgba(0,0,255,0.5)');
for (var i = 0; i < 10; i++) {
var g2 = context.createRadialGradient(i * 25, i * 25, 0, i * 25, i * 25, i * 10);
g2.addColorStop(0.1, 'rgba(255,0,0,0.5)');
g2.addColorStop(0.7, 'rgba(255,255,0,0.5)');
g2.addColorStop(1, 'rgba(0,0,255,0.5)');
context.beginPath();
context.fillStyle = g2;
context.arc(i * 25, i * 25, i * 10, 0, Math.PI * 2, true);
context.fill();
}
}
function draw5(id) {
var canvas = document.getElementById(id);
if (canvas == null)
return false;
var context = canvas.getContext("2d");
context.save(); //保存了當(dāng)前context的狀態(tài)
context.fillStyle = "#EEEEFF";
context.fillRect(0, 0, 400, 300);
context.fillStyle = "rgba(255,0,0,0.1)";
//平移 縮放 旋轉(zhuǎn) 1 2 3
context.translate(100, 100);
context.scale(0.5, 0.5);
context.rotate(Math.PI / 4);
context.fillRect(0, 0, 100, 100);
context.restore(); //恢復(fù)到剛剛保存的狀態(tài),保存恢復(fù)只能使用一次
context.save(); //保存了當(dāng)前context的狀態(tài)
context.fillStyle = "rgba(255,0,0,0.2)";
//平移 旋轉(zhuǎn) 縮放 1 3 2
context.translate(100, 100);
context.rotate(Math.PI / 4);
context.scale(0.5, 0.5);
context.fillRect(0, 0, 100, 100);
context.restore(); //恢復(fù)到剛剛保存的狀態(tài)
context.save(); //保存了當(dāng)前context的狀態(tài)
context.fillStyle = "rgba(255,0,0,0.3)";
//縮放 平移 旋轉(zhuǎn) 2 1 3
context.scale(0.5, 0.5);
context.translate(100, 100);
context.rotate(Math.PI / 4);
context.fillRect(0, 0, 100, 100);
context.restore(); //恢復(fù)到剛剛保存的狀態(tài)
context.save(); //保存了當(dāng)前context的狀態(tài)
context.fillStyle = "rgba(255,0,0,0.4)";
//縮放 旋轉(zhuǎn) 平移 2 3 1
context.scale(0.5, 0.5);
context.rotate(Math.PI / 4);
context.translate(100, 100);
context.fillRect(0, 0, 100, 100);
context.restore(); //恢復(fù)到剛剛保存的狀態(tài)
context.save(); //保存了當(dāng)前context的狀態(tài)
context.fillStyle = "rgba(255,0,0,0.5)";
//旋轉(zhuǎn) 平移 縮放 3 1 2
context.rotate(Math.PI / 4);
context.translate(100, 100);
context.scale(0.5, 0.5);
context.fillRect(0, 0, 100, 100);
context.restore(); //恢復(fù)到剛剛保存的狀態(tài)
context.save(); //保存了當(dāng)前context的狀態(tài)
context.fillStyle = "rgba(255,0,0,1)";
//旋轉(zhuǎn) 縮放 平移 3 2 1
context.rotate(Math.PI / 4);
context.scale(0.5, 0.5);
context.translate(100, 100);
context.fillRect(0, 0, 100, 100);
//實(shí)驗(yàn)表明應(yīng)該移動(dòng)的是坐標(biāo)軸
//實(shí)驗(yàn)表明縮放的是坐標(biāo)軸比例
//實(shí)驗(yàn)表明旋轉(zhuǎn)的是坐標(biāo)軸
//綜合上述，因此平移 縮放 旋轉(zhuǎn) 三者的順序不同都將畫出不同的結(jié)果
}
function draw6(id) {
var canvas = document.getElementById(id);
if (canvas == null)
return false;
var context = canvas.getContext('2d');
context.fillStyle = "#EEEEFF";
context.fillRect(0, 0, 400, 300);
//圖形繪制
context.translate(200, 50);
context.fillStyle = 'rgba(255,0,0,0.25)';
for (var i = 0; i < 50; i++) {
//實(shí)驗(yàn)表明translate、scale、rotate都是在原有的context屬性上調(diào)整的
context.translate(25, 25);
context.scale(0.95, 0.95);
context.rotate(Math.PI / 10);
context.fillRect(0, 0, 100, 50);
}
}
function draw7(id) {
var canvas = document.getElementById(id);
var context = canvas.getContext("2d");
context.fillStyle = "#EEEEFF";
context.fillRect(0, 0, 400, 300);
//圖形繪制
context.translate(200, 50);
for (var i = 0; i < 50; i++) {
context.translate(25, 25);
context.scale(0.95, 0.95);
context.rotate(Math.PI / 10);
create5Star(context);
context.fill();
}
}
function draw8(id) {
var canvas = document.getElementById(id);
if (canvas == null)
return false;
var context = canvas.getContext("2d");
//context.beginPath();
context.strokeStyle = "rgb(250,0,0)";
context.fillStyle = "rgb(250,0,0)"
//實(shí)驗(yàn)證明第一次lineTo的時(shí)候和moveTo功能一樣
context.lineTo(100, 100);
//之后的lineTo會(huì)以上次lineTo的節(jié)點(diǎn)為開始
context.lineTo(200, 200);
context.lineTo(200, 100);
context.moveTo(200, 50);
context.lineTo(100,50);
context.stroke();
}
function draw9(id) {
var canvas = document.getElementById(id);
if (canvas == null)
return false;
var context = canvas.getContext("2d");
//定義顏色
var colors = ["red", "orange", "yellow", "green", "blue", "navy", "perple"];
//定義線寬
context.lineWidth = 10;
context.transform(1,0,0,1,100,0)
//循環(huán)繪制圓弧
for (var i = 0; i < colors.length; i++) {
//定義每次向下移動(dòng)10個(gè)像素的變換矩陣
context.transform(1, 0, 0, 1, 0, 10);
//設(shè)定顏色
context.strokeStyle = colors[i];
context.beginPath();
context.arc(50, 100, 100, 0, Math.PI, true);
context.stroke();
}
}
function draw10(id) {
var canvas = document.getElementById(id);
if (canvas == null) {
return false;
}
var context = canvas.getContext("2d");
var oprtns = new Array(
"source-over",
"destination-over",
"source-in",
"destination-in",
"source-out",
"destination-out",
"source-atop",
"destination-atop",
"lighter",
"xor",
"copy"
);
var i = 0;//組合效果編號(hào)
//結(jié)合setinterval動(dòng)態(tài)顯示組合
var interal = setInterval(function () {
if (i == 10) {
i=0;
}
else {
i++;
}
//每次重繪前清空
context.clearRect(0,0,400,300)
//藍(lán)色矩形
context.fillStyle = "blue";
context.fillRect(10, 10, 60, 60);
//設(shè)置組合方式
context.globalCompositeOperation = oprtns[i];
//設(shè)置新圖形（紅色圓形）
context.beginPath();
context.fillStyle = "red";
context.arc(60, 60, 30, 0, Math.PI * 2, false);
context.fill();
}, 1000);
}
function create5Star(context) {
var n = 0;
var dx = 100;
var dy = 0;
var s = 50;
//創(chuàng)建路徑
context.beginPath();
context.fillStyle = 'rgba(255,0,0,0.5)';
var x = Math.sin(0);
var y = Math.cos(0);
var dig = Math.PI / 5 * 4;
for (var i = 0; i < 5; i++) {
var x = Math.sin(i * dig);
var y = Math.cos(i * dig);
context.lineTo(dx + x * s, dy + y * s);
}
context.closePath();
}
function draw11(id) {
var canvas = document.getElementById(id);
if (canvas == null)
return false;
var context = canvas.getContext("2d");
context.fillStyle = "#EEEEFF";
context.fillRect(0, 0, 400, 300);
context.shadowOffsetX = 10;
context.shadowOffsetY = 10;
context.shadowColor = 'rgba(100,100,100,0.5)';
context.shadowBlur =5;
//圖形繪制
context.translate(0, 50);
for (var i = 0; i < 3; i++) {
context.translate(50, 50);
create5Star(context);
context.fill();
}
}
//drawImage(image,x,y)
function draw28(id) {
var image = new Image();
image.src = "http://pic002.cnblogs.com/images/2012/407398/2012080410383846.png";
var canvas = document.getElementById(id);
if (canvas == null)
return false;
var context = canvas.getContext("2d");
context.fillStyle = "#EEEEFF";
context.fillRect(0, 0, 400, 300);
image.onload = function () {
context.drawImage(image,0,0);
}
}
//drawImage(image,x,y,w,h)
function draw12(id) {
var image = new Image();
image.src = "http://pic002.cnblogs.com/images/2012/407398/2012080410383846.png";
var canvas = document.getElementById(id);
if (canvas == null)
return false;
var context = canvas.getContext("2d");
context.fillStyle = "#EEEEFF";
context.fillRect(0, 0, 400, 300);
image.onload = function () {
context.drawImage(image, 50, 50, 300, 200);
}
}
//drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh)
function draw13(id){
var image = new Image();
image.src = "http://pic002.cnblogs.com/images/2012/407398/2012080410383846.png";
var canvas = document.getElementById(id);
if (canvas == null)
return false;
var context = canvas.getContext("2d");
context.fillStyle = "#EEEEFF";
context.fillRect(0, 0, 400, 300);
image.onload = function () {
context.drawImage(image, 100, 100, 200, 150,50,50,300,200);//這里取的是實(shí)際尺寸
}
}
function draw14(id) {
//傳統(tǒng)的平鋪是用for循環(huán)來處理的，現(xiàn)在直接調(diào)用接口
var image = new Image();
var canvas = document.getElementById(id);
if (canvas == null)
return false;
var context = canvas.getContext("2d");
var type = ["no-repeat", "repeat-x", "repeat-y", "repeat"];
var i = 0;
image.src = "http://pic002.cnblogs.com/images/2012/407398/2012080410383846.png";
image.onload = function () {
var interval = setInterval(function () {
//每次轉(zhuǎn)換平鋪類型清空
context.clearRect(0, 0, 400, 300);
if (i >= 4) {
i = 0;
}
var ptrn = context.createPattern(image, type[i]);
context.fillStyle = ptrn;
context.fillRect(0, 0, 400, 300);
i++;
}, 1000);
};
}
//圖像裁剪
function draw15(id) {
var canvas = document.getElementById(id);
if (canvas == null)
return false;
var context = canvas.getContext("2d");
context.fillStyle = "black";
context.fillRect(0, 0, 400, 300);
image = new Image();
image.onload = function () {
drawImg(context,image);
}
image.src = "http://pic002.cnblogs.com/images/2012/407398/2012080410383846.png"
}
function drawImg(context, image) {
//圓形裁剪區(qū)
//createCircleClip(context)
//星形裁剪區(qū)
create5StarClip(context);
context.drawImage(image,0,0);
}
function createCircleClip(context) {
context.beginPath();
context.arc(200, 150, 100, 0, Math.PI * 2, true);
context.closePath();
context.clip();
}
function create5StarClip(context) {
var n = 0;
var dx = 200;
var dy = 135;
var s = 150;
context.beginPath();
var x = Math.sin(0);
var y = Math.cos(0);
var dig = Math.PI / 5 * 4;
for (var i = 0; i < 5; i++) {
var x = Math.sin(i * dig);
var y = Math.cos(i * dig);
context.lineTo(dx + x * s, dy + y * s);
}
context.closePath();
context.clip();
}
function draw16(id) {
var canvas = document.getElementById(id);
if (canvas == null)
return false;
var context = canvas.getContext("2d");
context.fillStyle = 'red'
//在右下角畫一個(gè)正方形
context.fillRect(250,250,150,50);
var image = new Image();
image.src = "http://pic002.cnblogs.com/images/2012/407398/2012080410383846.png";
image.onload = function () {
//在左上角畫一幅圖片
context.drawImage(image, 0, 0,200,200);
//實(shí)驗(yàn)證明imagedata取的是canvas所在范圍畫的圖形，不止是圖片
//不會(huì)取該區(qū)域內(nèi)是空白的canvas的像素
var imagedata = context.getImageData(0, 0, 400, 300);
//修改imagedata
for (var i = 0, n = imagedata.data.length; i < n; i += 4) {
imagedata.data[i + 0] = 255 - imagedata.data[i + 0]; //red;
imagedata.data[i + 1] = 255 - imagedata.data[i + 1]; //green
imagedata.data[i + 2] = 255 - imagedata.data[i + 2]; //blue
//imagedata.data[i + 3] = 255 - imagedata.data[i + 3]; //a
}
context.putImageData(imagedata,0 ,0,100,100,300,200);
}
}
function draw17(id) {
var canvas = document.getElementById(id);
if (canvas == null)
return false;
var context = canvas.getContext("2d");
context.fillStyle = "#EEEEFF";
context.fillRect(0,0,400,300);
context.fillStyle = "#00f";
context.font = "italic 30px sans-serif";
context.textBaseline = 'top';
//填充字符串
var txt="fill示例文字"
context.fillText(txt, 0, 0);
var length=context.measureText(txt);
context.fillText("長(zhǎng)" + length.width + "px", 0, 50);
context.font = "bolid 30px sans-serif";
txt = "stroke示例文字";
length = context.measureText(txt);
context.strokeText(txt,0,100);
context.fillText("長(zhǎng)" + length.width + "px", 0, 150);
}
function draw18(id) {
var canvas = document.getElementById(id);
if (canvas == null)
return false;
var context = canvas.getContext("2d");
context.fillStyle = "red";
context.save(); //保存了當(dāng)前context的狀態(tài)
context.fillStyle = "black";
context.fillRect(0, 0, 100, 100);
context.restore();//恢復(fù)到剛剛保存的狀態(tài)
context.fillRect(0,120,100,100);
}
function draw19(id) {
var canvas = document.getElementById(id);
if (canvas == null)
return false;
var context = canvas.getContext("2d");
context.fillStyle = "rgb(0,0,225)";
context.fillRect(0, 0, canvas.width, canvas.height);
context.fillStyle = "rgb(255,255,0)";
context.fillRect(10, 20, 50, 50);
//把圖像保存到新的窗口
var w=window.open(canvas.toDataURL("http://pic002.cnblogs.com/images/2012/407398/2012080410383846.png"),"smallwin","width=400,height=350");
}
function draw20(id) {
var canvas = document.getElementById(id);
if (canvas == null)
return false;
var context = canvas.getContext("2d");
var interal = setInterval(function () {
move(context);
}, 1);
}
var x = 100;//矩形開始坐標(biāo)
var y = 100;//矩形結(jié)束坐標(biāo)
var mx = 0;//0右1左
var my = 0; //0下1上
var ml = 1;//每次移動(dòng)長(zhǎng)度
var w = 20;//矩形寬度
var h = 20;//矩形高度
var cw = 400;//canvas寬度
var ch = 300; //canvas高度
function move(context) {
context.clearRect(0, 0, 400, 300);
context.fillStyle = "#EEEEFF";
context.fillRect(0, 0, 400, 300);
context.fillStyle = "red";
context.fillRect(x, y, w, h);
if (mx == 0) {
x = x + ml;
if (x >= cw-w) {
mx = 1;
}
}
else {
x = x - ml;
if (x <= 0) {
mx = 0;
}
}
if (my == 0) {
y = y + ml;
if (y >= ch-h) {
my = 1;
}
}
else {
y = y - ml;
if (y <= 0) {
my = 0;
}
}
}
window.onload = function () {
draw21("canvas21");
draw22("canvas22");
draw23("canvas23");
draw24("canvas24");
draw25("canvas25");
draw26("canvas26");
draw27("canvas27");
draw28("canvas28");
draw0("canvas0");
draw1("canvas1");
draw2("canvas2");
draw3("canvas3");
draw4("canvas4");
draw5("canvas5");
draw6("canvas6");
draw8("canvas8");
draw7("canvas7");
draw9("canvas9");
draw10("canvas10");
draw11("canvas11");
draw12("canvas12");
draw13("canvas13");
draw14("canvas14");
draw15("canvas15");
draw16("canvas16");
draw17("canvas17");
draw18("canvas18");
draw19("canvas19");
draw20("canvas20");
}
</script>
</head>
<body>
<section><header><h1>畫矩形</h1></header><canvas id="canvas21" width="400" height="300"></canvas></section>
<section><header><h1>清除矩形</h1></header><canvas id="canvas22" width="400" height="300"></canvas></section>
<section><header><h1>繪制路徑</h1></header><canvas id="canvas23" width="400" height="300"></canvas></section>
<section><header><h1>畫圓()</h1></header><canvas id="canvas0" width="400" height="300"></canvas></section>
<section><header><h1>畫線test(lineTo moveTo)</h1></header><canvas id="canvas8" width="400" height="300"></canvas></section>
<section><header><h1>畫線demo(lineTo moveTo)</h1></header><canvas id="canvas1" width="400" height="300"></canvas></section>
<section><header><h1>貝塞爾曲線test（bezierCurveTo）</h1></header><canvas id="canvas24" width="400" height="300"></canvas></section>
<section><header><h1>貝塞爾曲線demo（bezierCurveTo）</h1></header><canvas id="canvas2" width="400" height="300"></canvas></section>
<section><header><h1>線性test（createLinearGradient addColorStop）</h1></header><canvas id="canvas25" width="400" height="300"></canvas></section>
<section><header><h1>線性demo（createLinearGradient addColorStop）</h1></header><canvas id="canvas3" width="400" height="300"></canvas></section>
<section><header><h1>發(fā)散test（createRadialGradient）</h1></header><canvas id="canvas26" width="400" height="300"></canvas></section>
<section><header><h1>發(fā)散demo（createRadialGradient）</h1></header><canvas id="canvas4" width="400" height="300"></canvas></section>
<section><header><h1>平移 test（translate）縮放（scale） 旋轉(zhuǎn)（rotate）</h1></header><canvas id="canvas5" width="400" height="300"></canvas></section>
<section><header><h1>平移 demo（translate）縮放（scale） 旋轉(zhuǎn)（rotate）</h1></header><canvas id="canvas6" width="400" height="300"></canvas></section>
<section><header><h1>坐標(biāo)與路徑的結(jié)合使用</h1></header><canvas id="canvas7" width="400" height="300"></canvas></section>
<section><header><h1>矩陣變換</h1></header><canvas id="canvas9" width="400" height="300"></canvas></section>
<section><header><h1>圖形組合疊加(globalCompositeOperation)</h1></header><canvas id="canvas10" width="400" height="300"></canvas></section>
<section><header><h1>給圖像繪制陰影test shadowOffsetX(陰影的橫向位移量) shadowOffsetY(盈盈的縱向位移量) shadowColor（陰影的顏色） shadowBlur（陰影的模糊范圍）</h1></header><canvas id="canvas27" width="400" height="300"></canvas></section>
<section><header><h1>給圖像繪制陰影demo shadowOffsetX(陰影的橫向位移量) shadowOffsetY(盈盈的縱向位移量) shadowColor（陰影的顏色） shadowBlur（陰影的模糊范圍）</h1></header><canvas id="canvas11" width="400" height="300"></canvas></section>
<section><header><h1>繪制圖像drawImage(image,x,y)</h1></header><canvas id="canvas28" width="400" height="300"></canvas></section>
<section><header><h1>繪制圖像drawImage(image,x,y,w,h)</h1></header><canvas id="canvas12" width="400" height="300"></canvas></section>
<section><header><h1>繪制局部圖像drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh)</h1></header><canvas id="canvas13" width="400" height="300"></canvas></section>
<section><header><h1>圖像平鋪</h1></header><canvas id="canvas14" width="400" height="300"></canvas></section>
<section><header><h1>圖像裁剪clip</h1></header><canvas id="canvas15" width="400" height="300"></canvas></section>
<section><header><h1>像素處理getImageData</h1></header><canvas id="canvas16" width="400" height="300"></canvas></section>
<section><header><h1>繪制文字fillText strokeText</h1></header><canvas id="canvas17" width="400" height="300"></canvas></section>
<section><header><h1>繪圖狀態(tài)的保存save與恢復(fù)restore</h1></header><canvas id="canvas18" width="400" height="300"></canvas></section>
<section><header><h1>保存文件canvas.toDataURL</h1></header><canvas id="canvas19" width="400" height="300"></canvas></section>
<section><header><h1>簡(jiǎn)單動(dòng)畫</h1></header><canvas id="canvas20" width="400" height="300"></canvas></section>
</body>
</html>
以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時(shí)也希望多多支持腳本之家！
您可能感興趣的文章:
- JQuery和HTML5 Canvas實(shí)現(xiàn)彈幕效果
- javascript+HTML5 Canvas繪制轉(zhuǎn)盤抽獎(jiǎng)
- javascript html5 canvas實(shí)現(xiàn)可拖動(dòng)省份的中國(guó)地圖
- JavaScript+html5 canvas實(shí)現(xiàn)本地截圖教程
- JavaScript html5 canvas畫布中刪除一個(gè)塊區(qū)域的方法
- 利用HTML5的畫布Canvas實(shí)現(xiàn)刮刮卡效果
- js+html5實(shí)現(xiàn)canvas繪制簡(jiǎn)單矩形的方法
- js+html5實(shí)現(xiàn)canvas繪制鏤空字體文本的方法
- js+html5通過canvas指定開始和結(jié)束點(diǎn)繪制線條的方法
- js+HTML5實(shí)現(xiàn)canvas多種顏色漸變效果的方法
相關(guān)文章
返回上一頁(yè)并刷新在此功能有利于用戶的體驗(yàn),是每一個(gè)web開發(fā)人員所必備的一項(xiàng)，長(zhǎng)話短說，今天介紹實(shí)現(xiàn)此功能的一個(gè)方法，需要了解的朋友可以參考下2012-12-12
這篇文章主要介紹了JS?ES5創(chuàng)建常量詳解，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，感興趣的小伙伴可以參考一下2022-07-07
做一個(gè)鼠標(biāo)移入移出圖片事件，首先是改變分辨率的兩種方法，鼠標(biāo)移入圖片和移出圖片的分辨率不同，具體實(shí)現(xiàn)如下，感興趣的朋友可以參考下2013-12-12
這篇文章主要介紹了簡(jiǎn)單了解JavaScript中常見的反模式，反模式 是指對(duì)反復(fù)出現(xiàn)的設(shè)計(jì)問題的常見的無力而低效的設(shè)計(jì)模式，俗話說就是重蹈覆轍。 這篇文章描述了 JavaScript 中常見的一些反模式，以及避免它們的辦法。,需要的朋友可以參考下2019-06-06
js實(shí)現(xiàn)點(diǎn)擊注冊(cè)按鈕開始讀秒倒計(jì)時(shí)的小例子
js實(shí)現(xiàn)點(diǎn)擊注冊(cè)按鈕開始讀秒倒計(jì)時(shí)的小例子，需要的朋友可以參考一下2013-05-05
在點(diǎn)擊div中的p時(shí)，如何阻止事件冒泡
本文主要介紹了在點(diǎn)擊div中的p時(shí)，如何阻止事件冒泡的方法，具有很好的參考價(jià)值，下面跟著小編一起來看下吧2017-02-02
這篇文章介紹了js實(shí)現(xiàn)日期靈活格式化的小例子，有需要的朋友可以參考一下2013-07-07
JS基于VML技術(shù)實(shí)現(xiàn)的五角星禮花效果代碼
這篇文章主要介紹了JS基于VML技術(shù)實(shí)現(xiàn)的五角星禮花效果代碼,涉及JavaScript數(shù)學(xué)運(yùn)算與頁(yè)面元素動(dòng)態(tài)操作的相關(guān)技巧,需要的朋友可以參考下2015-10-10
JavaScript實(shí)現(xiàn)按鍵精靈的原理分析
這篇文章主要介紹了JavaScript實(shí)現(xiàn)按鍵精靈的原理分析,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-02-02
JavaScript 字符串處理函數(shù)使用小結(jié)
JavaScript 字符串處理函數(shù)使用小結(jié)，學(xué)習(xí)js的朋友可以參考下。2010-12-12