html5之canvas
HTML <canvas> 标签用于通过脚本（通常是 JavaScript）动态绘制图形。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <canvas id="example" width="600" height="500" style="border: solid 1px #ccc"></canvas> <canvas id="example1" width="600" height="500" style="border: solid 1px #ccc"></canvas> </body> <script> function draw(id) { const canvas = document.getElementById(id); if (canvas == null) return false; //设置画布的宽高，也可以在标签上直接设置 canvas.width = 600; canvas.height = 500; //获取canvas的绘图对象/方法 const context = canvas.getContext("2d"); //设置图形边框的宽度 context.lineWidth = 1; //定义绘画开始的位置 context.moveTo(0, 0); //画一条直线 context.lineTo(100, 0); context.lineTo(100, 100); context.lineTo(0, 100); context.lineTo(0, 0); //描边 context.stroke(); //填充矩形 context.fillRect(x,y,width,height)，默认fillStyle=black context.fillRect(0, 120, 100, 100); //描边矩形 strokeRect(x,y,width,height)，默认strokeStyle=black context.strokeRect(120, 120, 100, 100); //设置纯色 context.fillStyle = "red"; context.strokeStyle = "blue"; context.fillRect(0, 240, 100, 100); context.strokeRect(120, 240, 100, 100); //设置透明度 context.fillStyle = "rgba(255,0,0,0.2)"; context.strokeStyle = "rgba(255,0,0,0.2)"; context.fillRect(0, 360, 100, 100); context.strokeRect(120, 360, 100, 100); //清除矩形 context.clearRect(x,y,width,height) context.clearRect(60, 180, 120, 120); //开始新的路径绘制 context.beginPath(); //圆弧 context.arc(x, y, radius, starAngle,endAngle, anticlockwise) context.arc(180, 50, 50, 0, Math.PI * 2, true); //不关闭路径路径会一直保留下去，当然也可以利用这个特点做出意想不到的效果 context.closePath(); context.fill(); //线性渐变颜色样式 context.createLinearGradient(xStart,yStart,xEnd,yEnd) let lg = context.createLinearGradient(0, 0, 0, 100); //线性渐变颜色 lg.addColorStop(offset,color) lg.addColorStop(0, "rgb(255,0,0)"); //红 lg.addColorStop(0.5, "rgb(0,255,0)"); //绿 lg.addColorStop(1, "rgb(0,0,255)"); //蓝 context.fillStyle = lg; context.fillRect(240, 0, 100, 100); //径向渐变颜色样式 context.createRadialGradient(xStart,yStart,radiusStart,xEnd,yEnd,radiusEnd) lg = context.createRadialGradient(410, 50, 5, 430, 70, 50); //径向渐变颜色 lg.addColorStop(offset,color) lg.addColorStop(0, "rgb(255,0,0)"); //红 lg.addColorStop(0.5, "rgb(0,255,0)"); //绿 lg.addColorStop(1, "rgb(0,0,255)"); //蓝 context.fillStyle = lg; context.fillRect(360, 0, 100, 100); //保存当前context的状态 context.save(); context.fillStyle = "rgba(0,255,0,0.8)"; //设置图形叠加样式 context.globalCompositeOperation = "lighter"; //平移 context.translate(480, 0); //旋转 context.rotate(Math.PI / 4); //缩放 context.scale(0.5, 0.5); context.fillRect(0, 0, 100, 100); //恢复到刚刚保存的状态 context.restore(); //选取图像的一部分矩形区域进行绘制drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh) const image = new Image(); image.src = "images/1.jpg"; image.onload = function () { //设置图形阴影的横向位移量 context.shadowOffsetX = 10; //设置图形阴影的纵向位移量 context.shadowOffsetY = 10; //设置图形阴影的颜色 context.shadowColor = "rgba(100,100,100,0.5)"; //设置图形阴影的模糊范围（值越大越模糊） context.shadowBlur = 1.5; //剪切图像，并在画布上定位被剪切的部分 context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height); context.drawImage(image, 100, 100, 100, 100, 240, 120, 100, 100); //图像裁剪：context.clip() context.beginPath(); context.arc(290, 290, 50, 0, Math.PI * 2, true); context.closePath(); context.clip(); //在画布上定位图像 context.drawImage(img,x,y); context.drawImage(image, 0, 0); }; //图像平铺 context.createPattern(image,type) const image1 = new Image(); image1.src = "images/square.jpg"; image1.onload = function () { const pattern = context.createPattern(image1, "repeat"); context.fillStyle = pattern; context.fillRect(360, 120, 100, 100); }; //设置字体样式 context.font = "italic 30px sans-serif"; //设置字体水平对齐方式 context.textAlign = "center"; //设置字体垂直对齐方式 context.textBaseline = "top"; //计算字体长度(px) console.log(context.measureText("Hello")); console.log(context.measureText("你好")); //填充文字：context.fillText(text,x,y) context.fillText("Hello", 400, 240); //绘制文字轮廓 context.strokeText(text,x,y) context.strokeText("你好", 400, 280); //保存文件 canvas.toDataURL(mime); var image_f = canvas.toDataURL("image/png"); } function handlePx(id) { const canvas = document.getElementById(id); if (!canvas) return false; const context = canvas.getContext("2d"); const w = canvas.width / 4; const h = canvas.height / 4; const image = new Image(); image.src = "images/1.jpg"; image.onload = function () { //在画布上定位图像，并规定图像的宽度和高度：context.drawImage(img,x,y,width,height) context.drawImage(image, 0, 0, w, h); //获取像素颜色数组： context.getImageData(sx,sy,sw,sh) const imageData = context.getImageData(0, 0, w, h); const imageData_length = imageData.data.length / 4; //图片反色的原理 d=255-s for (let i = 0; i < imageData_length; i++) { imageData.data[i * 4] = 255 - imageData.data[i * 4]; imageData.data[i * 4 + 1] = 255 - imageData.data[i * 4 + 1]; imageData.data[i * 4 + 2] = 255 - imageData.data[i * 4 + 2]; } context.putImageData(imageData, w + 10, 0); //黑白照片 原理是采用人眼对RGB不同颜色的敏感程度不同，然后通过得出的加权平均数来运算出最后的结果
//Gray = (Red * 0.3 + Green * 0.59 + Blue * 0.11) for (let i = 0; i < imageData_length; i++) { const gray_val = imageData.data[i * 4] * 0.3 + imageData.data[i * 4 + 1] * 0.59 + imageData.data[i * 4 + 2] * 0.11; imageData.data[i * 4] = gray_val; imageData.data[i * 4 + 1] = gray_val; imageData.data[i * 4 + 2] = gray_val; } context.putImageData(imageData, 2 * w + 20, 0); }; } document.addEventListener("DOMContentLoaded", () => { draw("example"); handlePx("example1"); }); </script> </html>
效果：
