环形进度条
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>