You must know these before learning these operations: Canvas
1. Basic operation of canvas pictures
1.定义 canvas 对象
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
2.canvas 引入图片
var myimg = new Image();
myimg.src = "imgs/1.jpg";
myimg.onload = function(){
context.drawImage(myimg,10,10,300,300);
}
/**
* 画布中不显示图片的原因：
* 先加载canvas画布,在画布中加载图片
* 解决办法：
* window.onload - 页面加载完毕
* img.onload - 保证图片先加载完毕 推荐使用
*/
3.canvas 图片平铺
var myimg = new Image();
myimg.src = "imgs/1.jpg";
myimg.onload = function(){
var ptn = context.createPattern(myimg,"repeat");
context.fillStyle = ptn;
context.fillRect(0,0,canvas.width,canvas.height);
}
4.canvas 图片切割
var myimg = new Image();
myimg.src = "imgs/1.jpg";
myimg.onload = function(){
context.drawImage(myimg,0,0);
}
//截图 => clip() 属性创建一个路径
context.beginPath();
context.arc(180,70,50,0,Math.PI*2); // context.rect(120,20,150,100);
context.closePath();
context.clip();
5.canvas 绘制原地旋转图片
var img = new Image();
img.src = "imgs/hero1.png";
img.onload = function(){
var deg = 0;
setInterval(function(){
cxt.clearRect(0,0,w,h); // 清除画布
cxt.save(); // 存储API
deg += 5;
cxt.translate(img.width/2,img.height/2); // 新设原点
cxt.rotate(deg * Math.PI/180); // 旋转角度
//绘制图像设置绘制图像时的坐标位置
cxt.drawImage(img,-(img.width/2),-(img.height/2));
cxt.restore(); // 存储API
}, 100)
Second, the drawing operation example
Q1:原地旋转
(1) Effect diagram
(2) Implementation method
<canvas id="c1"></canvas>
<script>
var canvas = document.getElementById("c1");
var w = 600,h = 400;
canvas.width = w;
canvas.height = h;
var cxt = canvas.getContext("2d");
var img = new Image();
img.src = "img/02.gif";
img.onload = function(){
var deg = 0;
setInterval(function(){
cxt.clearRect(0,0,w,h);
/* 左上 */
cxt.save();
deg += 5;
cxt.translate(img.width/2,img.height/2);
cxt.rotate(deg * Math.PI/180);
cxt.drawImage(img,-(img.width/2),-(img.height/2));//绘制图像设置绘制图像时的坐标位置
cxt.restore();
/* 右上 */
cxt.save();
cxt.translate(500+img.width/2,img.height/2);
cxt.rotate(deg * Math.PI/180);
cxt.drawImage(img,-(img.width/2),-(img.height/2));
cxt.restore();
/* 左下 */
cxt.save();
cxt.translate(img.width/2,300+img.height/2);
cxt.rotate(deg * Math.PI/180);
cxt.drawImage(img,-(img.width/2),-(img.height/2));
cxt.restore();
/* 右下 */
},10)
}
</script>
Q2:验证码
(1) Effect diagram
(2) Implementation method
<canvas id="c1"></canvas>
<script>
var canvas_02 = document.getElementById("c2");
canvas_02.width = 600; // canvas_02.width = 150;
canvas_02.height = 200; // canvas_02.height = 50;
change_code();
canvas_02.onclick = function(){
change_code();
}
function change_code(){
canvas_02.style.backgroundColor = random_color_bg();
var cxt_02 = canvas_02.getContext("2d"); // 创建canvas对象
var wid = canvas_02.width; // 画布 宽
var hei = canvas_02.height; // 画布 高
var random_rotate = null; // 随机旋转角
var arr_code = random_code();
var tmp = wid / 5, tmpLine = hei / 6;
cxt_02.clearRect(0, 0, wid, hei); // clear
cxt_02.font = "bold " + hei * 2 / 3 + "px 宋体";
// 随机旋转角
for(var i = 0; i < arr_code.length; i++){
cxt_02.save();
cxt_02.fillStyle = random_color_font();
cxt_02.translate(tmp,hei * 2/3);
random_rotate = Math.PI/180 * Math.floor(Math.random() * 60);
random_rotate = Math.random() > 0.5 ? random_rotate : -random_rotate;
cxt_02.rotate(random_rotate);
cxt_02.fillText(arr_code[i],0, 0);
tmp += wid / 5;
cxt_02.restore();
}
// 5干扰线
for(var j = 0; j < 5; j++){
cxt_02.beginPath();
cxt_02.moveTo(0, tmpLine);
cxt_02.lineTo(wid,tmpLine);
cxt_02.strokeStyle = random_color_font();
cxt_02.stroke();
tmpLine += hei / 6;
cxt_02.closePath();
}
// 50散点
for(var k = 0; k < 50; k++){
cxt_02.beginPath();
cxt_02.arc(Math.floor(Math.random() * wid), Math.floor(Math.random() * hei), 1, 0, Math.PI * 2);
cxt_02.strokeStyle = random_color_font();
cxt_02.stroke();
cxt_02.closePath();
}
}
// 浅色
function random_color_bg(){
var r = 255 - Math.floor(Math.random() * 100);
var g = 255 - Math.floor(Math.random() * 100);
var b = 255 - Math.floor(Math.random() * 100);
return "rgb(" + r + "," + g + "," + b + ")";
}
// 深色
function random_color_font(){
var r = Math.floor(Math.random() * 150);
var g = Math.floor(Math.random() * 150);
var b = Math.floor(Math.random() * 150);
return "rgb(" + r + "," + g + "," + b + ")";
}
// 四位随机字符
function random_code(){
var letters = [], chars = [];
for(var i = 48;i <= 57;i++) // 数字
if(i != 54 && i != 57 && i != 49) // 剔除 6 9 1
letters.push(String.fromCharCode(i));
for(var i = 65;i <= 90;i++) // 大写
letters.push(String.fromCharCode(i));
for(var i = 97;i <= 122;i++) // 小写
if(i != 108) // 剔除 l
letters.push(String.fromCharCode(i));
for(var j = 0; j <= 3; j++){
var n = parseInt(Math.random() * letters.length);
chars.push(letters[n]);
letters.splice(n,1);
}
console.log(chars.join(""));
return chars;
}
</script>
~~~~~~~~~~~~~~~~~~~ END ~~~~~~~~~~~~~~~~~~~
