素材链接：卡通头像 - Bing
一、drawImage()绘制
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>canvas</title> </head> <body> <div><img src="../img/demo.png" alt=""></img></div> <div> <canvas id="myCanvas" width="400" height="400">你的浏览器不支持HTML5</canvas> </div> </body> <script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); var image = new Image(); image.src = "../img/demo.png"; image.onload = function () { //以(10,10)为顶点，绘制图像 ctx.drawImage(image, 10, 10); //以(110,10)为顶点，绘制宽度110，高度为110图像 ctx.drawImage(image, 110, 10, 110, 110); //图片从（10,10）剪切宽度50，高度50，显示到（210,10） 宽度150，高度150 ctx.drawImage(image, 10, 10, 50, 50, 210, 10, 150, 150); } </script> </html>
//以(10,10)为顶点，绘制图像 ctx.drawImage(image, 10, 10);
//以(110,10)为顶点，绘制宽度110，高度为110图像 ctx.drawImage(image, 110, 10, 110, 110);
//图片从（10,10）剪切宽度50，高度50，显示到（210,10） 宽度150，高度150 ctx.drawImage(image, 10, 10, 50, 50, 210, 10, 150, 150);
二、getImageData()与putImageData()绘制图片
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>canvas</title> </head> <body> <div><img src="../img/demo.png" alt=""></img></div> <div> <canvas id="myCanvas" width="600" height="600">你的浏览器不支持HTML5</canvas> </div> </body> <script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); var image = new Image(); image.src = "../img/demo.png"; image.onload = function () { //以(10,10)为顶点，绘制图像 ctx.drawImage(image, 10, 10); //开始复制位置（20,20）,复制宽度100，复制高度100 var imgData = ctx.getImageData(20, 20, 100, 100); //将复制图像显示至（300,20）位置 ctx.putImageData(imgData, 300, 20); //在（400,20）位置显示，图像（20,20）宽度50，高度50 ctx.putImageData(imgData, 400, 20, 20, 20, 50, 50) } </script> </html>
三、createImageData()新建像素
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>canvas</title> </head> <body> <div><img src="../img/demo.png" alt=""></img></div> <div> <canvas id="myCanvas" width="600" height="600">你的浏览器不支持HTML5</canvas> </div> </body> <script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); var image = new Image(); image.src = "../img/demo.png"; image.onload = function () { //以(10,10)为顶点，绘制图像 ctx.drawImage(image, 10, 10); //开始复制位置（20,20）,复制宽度100，复制高度100 var imgData = ctx.getImageData(20, 20, 100, 100); //创建空白imageData,宽度和高度使用imgData的宽度和高度(100,100) var imageData01 = ctx.createImageData(imgData); //填充imageData颜色和透明度grba for (var i = 0; i < imageData01.width * imageData01.height * 4; i += 4) { imageData01.data[i + 0] = 255; imageData01.data[i + 1] = 0; imageData01.data[i + 2] = 0; imageData01.data[i + 3] = 255; } //将复制图像显示至（10, 300）位置 ctx.putImageData(imageData01, 10, 300); //创建空白imageData var imageData02 = ctx.createImageData(100,100); for (var i = 0; i < imageData02.width * imageData02.height * 4; i += 4) { imageData02.data[i + 0] = 255; imageData02.data[i + 1] = 0; imageData02.data[i + 2] = 0; imageData02.data[i + 3] = 155; } //将复制图像显示至（120, 300）位置 ctx.putImageData(imageData02, 120, 300); } </script> </html>
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>canvas</title> </head> <body> <div><img src="../img/demo.png" alt=""></img></div> <div> <canvas id="myCanvas" width="600" height="600">你的浏览器不支持HTML5</canvas> </div> </body> <script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); var image = new Image(); image.src = "../img/demo.png"; image.onload = function () { //以(10,10)为顶点，绘制图像 ctx.drawImage(image, 10, 10); //开始复制位置（20,20）,复制宽度100，复制高度100 var imgData = ctx.getImageData(20, 20, 100, 100); //创建空白imageData,宽度和高度使用imgData的宽度和高度(100,100) var imageData01 = ctx.createImageData(imgData); //填充imageData颜色和透明度grba for (var i = 0; i < imageData01.width * imageData01.height * 4; i += 4) { imageData01.data[i + 0] = random(0,255); imageData01.data[i + 1] = random(0,125); imageData01.data[i + 2] = random(125,255); imageData01.data[i + 3] = random(0,255); } //将复制图像显示至（10, 300）位置 ctx.putImageData(imageData01, 10, 300); //创建空白imageData var imageData02 = ctx.createImageData(100,100); for (var i = 0; i < imageData02.width * imageData02.height * 4; i += 4) { imageData02.data[i + 0] = random(0,255); imageData02.data[i + 1] = random(125,255); imageData02.data[i + 2] = random(0,125); imageData02.data[i + 3] = random(0,255); } //将复制图像显示至（120, 300）位置 ctx.putImageData(imageData02, 120, 300); } function random(min, max) { return Math.floor(Math.random() * (max - min)) + min; } </script> </html>
