環形進度條
var mycanvas = document.querySelector("#tag");
var ctx = mycanvas.getContext("2d");
ctx.lineWidth = 20;
ctx.lineCap = "round";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.font = "30px '宋體'";
var num = 0;
//問題： 當 進度條轉360度的時候 要清除定時器 不在會值文本
var time = setInterval(function () {
// if(num==360){
// clearInterval(time)
// }
ctx.beginPath();
ctx.arc(250, 250, 200, 0, Math.PI/180*(num++));
ctx.stroke();
ctx.beginPath();
ctx.clearRect(200,200,100,100);
ctx.fillText(num , 250,250);
console.log(num);
if(num==360){
clearInterval(time)
}
}, 10)
canvas線性漸變
tx.createLinearGradient(x0,y0,x1,y1);
//添加的是線性的漸變
//1,創建一條具有漸變的線 第一個點的座標 第二個點座標
//沒有角度，兩點確定一條直線此時就已經繪製出現了角度
// ctx.createLinearGradient(x0,y0,x1,y1);
var lg=ctx.createLinearGradient(0,0,500,0);
//2給這條漸變線上色 0~1 1相當於100%
lg.addColorStop(0,"#f00");
lg.addColorStop(.5,"#f0f");
lg.addColorStop(1,"#ff0");
//3將該漸變線設置給對應的樣式
ctx.fillStyle = lg;
ctx.fillRect(0, 0, 500, 500);
canvas徑向漸變
rg=ctx.createRadialGradient(x,y,r,x1,y1,r1);
var mycanvas = document.querySelector("canvas");
var ctx = mycanvas.getContext("2d");
// 徑向漸變 內圓弧 到外圓弧之間的顏色遞變
var rg=ctx.createRadialGradient(250,250,100,250,250,200); //同心圓
// var rg=ctx.createRadialGradient(20,250,10,250,250,200);
rg.addColorStop(0,"#f00");
rg.addColorStop(1,"#0ff");
ctx.fillStyle = rg;
ctx.fillRect(0,0,500,500);
無漸變色
var lg = ctx.createLinearGradient(0,0,0,500);
lg.addColorStop(.5,"#f00");
lg.addColorStop(.5,"#0ff");
ctx.fillStyle = lg;
ctx.fillRect(0,0,500,500);
陰影效果
添加陰影效果 沒有有連寫 陰影色 模糊度 偏移量 x，y
<script>
var mycanvas = document.querySelector("canvas");
var ctx = mycanvas.getContext("2d");
//添加陰影效果 沒有有連寫 陰影色 模糊度 偏移量 x，y
ctx.shadowColor = "yellow";
ctx.shadowBlur = 5;
ctx.shadowOffsetX = 10;
ctx.shadowOffsetY = 8;
ctx.fillStyle = "cyan";
// ctx.fillRect(200,200,100,150);
ctx.font = "bold 50px '宋體'";
ctx.fillText(" 你 好 ",100,100);
</script>
圖片的使用
圖片的使用 從canvas 那裏開始會值圖片
在使用圖資源的時候有可能圖片資源根本就沒有加載成功，那麼此時你在繪製的時候則會沒有將圖片繪製成功，在使用圖片的時候一定要確保圖片資源已經加載成功之後再繪製
1、 ctx.drawImage(圖片的對象，x，y)
頁面中有img
var myimg = document.querySelector("img");
myimg.onload = function () {
ctx.drawImage(myimg,0,0);
};
頁面沒有就創建
創建一個image對象 並且給該image對象 添加資源
//創建一個image對象 並且給該image對象 添加資源
var myimg = new Image();
myimg.src = "a.jpg";
console.log(myimg);
myimg.onload = function () {
ctx.drawImage(myimg,0,0);
};
2、ctx.drawImage(圖片對象,x,y，w，h); 可以調節大小
等比縮放 100/x=50/y
設置繪製的圖形大小 img的W/100 = img的H/? ? =
var myimg = new Image();
myimg.src = "lmx.jpg";
myimg.onload = function () {
// ctx.drawImage(myimg,0,0,100,500); //有可能會讓圖片失真變形
ctx.drawImage(myimg,0,0,100,500);//讓圖片等比縮放
};
圖片剪切
圖片資源 原圖截取點 （x，y） 截圖原圖的大小（w，h），在canvas的那個點開始繪製（x，y） ，在畫布上會值多大（w，h）
var mycanvas = document.querySelector("canvas");
var ctx = mycanvas.getContext("2d");
// 繪製圖片到canvas上
var img = new Image();
// img.src = "a.jpg";
img.src = "b.png";
// 確保圖片已經被加載
img.onload = function () {
//此時的this ===img對象 才能這麼寫
// ctx.drawImage(this,100,100);
// ctx.drawImage(img,100,100);
// ctx.drawImage(this,0,0,40,65,100,100,40,65);
// ctx.drawImage(this,0,0,160,65,100,100,40,65);
// ctx.drawImage(this,0,0,160,65,100,100,160,65);
ctx.drawImage(this,0,0,160,65,100,100,320,130);
}
幀動畫
<body>
<canvas width="500" height="500" style="border: 1px solid #000;">請更新您的瀏覽器</canvas>
<script>
var mycanvas = document.querySelector("canvas");
var ctx = mycanvas.getContext("2d");
var img = new Image();
img.src = "b.png";
img.onload = function () {
// ctx.drawImage(this,0,0,40,65,100,100,80,130)
var count = 0;
// (count++)*40
var tiems = setInterval(function () {
// console.log(this);
//注意此時就不能再用this 因爲this 此時代表的是windows對象
// ctx.drawImage(this,0,0,40,65,100,100,80,130)
//在繪製之前要先清除數據
// ctx.clearRect(0,0,500,500);
// ctx.drawImage(img,(count++)*40,0,40,65,100,100,80,130)
// 當想要獲取一個到另一個數之間重複的時候 %
// console.log((count++) % 4);
ctx.clearRect(0,0,500,500);
var tag=(count++) % 4;
ctx.drawImage(img,tag*40,0,40,65,100,50+count,80,130)
},10)
}
</script>
</body>
canvas位移
定義轉換 將0，0定平移到哪裏
ctx.translate(x,y)
ctx.translate(200,200);
ctx.translate(200,200);
ctx.beginPath();
ctx.fillStyle = "red";
ctx.fillRect(0, 0, 150, 100);
ctx.beginPath();
ctx.fillStyle = "rgba(0,255,0,0.5)";
ctx.fillRect(-200, -200, 150, 100);
canvas縮放
ctx.scale(x,y); ctx.scale(2,1);
ctx.scale(2,1);
ctx.strokeStyle = "yellow";
ctx.moveTo(10, 10);
ctx.lineTo(150, 10);
ctx.stroke();
ctx.fillStyle = "rgba(255,0,0,0.5)";
ctx.fillRect(20, 20, 150, 100);
canvas旋轉
ctx.rotate(-Math.PI/180*30); 在0,0 將x軸y軸旋轉
<canvas width="1000" height="600" style="border: 1px solid #000;">請更新您的瀏覽器</canvas>
<script>
var mycanvas = document.querySelector("canvas");
var ctx = mycanvas.getContext("2d");
ctx.beginPath();
ctx.fillStyle = "rgba(255,0,0,0.5)";
ctx.fillRect(20, 20, 150, 100);
ctx.rotate(-Math.PI/180*30);
ctx.beginPath();
ctx.fillStyle = "rgba(0,255,0,0.2)";
ctx.fillRect(20, 20, 170, 100);
</script>