HTML5 Canvas实现图片缩放、翻转、颜色渐变的代码示例
发布时间:2021-07-17 00:00| 有 位朋友查看
简介:翻转、移动、平移、放大、缩小 XML/HTML Code 复制内容到剪贴板 var canvas = document .getElementById('canvas'); if(canvas.getContext){ var context = canvas .getContext('2d'); //放大与缩小 context.beginPath(); context.strokeStyle = #000000 ; c……
翻转、移动、平移、放大、缩小
XML/HTML Code复制内容到剪贴板
- var canvas = document.getElementById('canvas');
- if (canvas.getContext) {
- var context = canvas.getContext('2d');
- // 放大与缩小
- context.beginPath();
- context.strokeStyle = "#000000";
- context.strokeRect(10,10,150,100);
-
- // 放大3倍
- context.scale(3,3);
- context.beginPath();
- context.strokeStyle = '#cccccc';
- context.strokeRect(10,10,150,100)
-
- // 缩小
- context.scale(0.5,0.5);
- context.beginPath();
- context.strokeStyle = '#cccccc';
- context.strokeRect(10,10,150,100)
-
- // 翻转
- var img = new Image();
- img.src = 'images/1.jpg';
- img.onload = function(){
- context.drawImage(img, 10,10);
- context.scale(1, -1);
- context.drawImage(img, 0, -500);
- }
- // 平移
- context.beginPath();
- context.strokeStyle = '#000000';
- context.strokeRect(10,101,150,100);
- // x移动 50 y 移动100
- context.translate(50,100);
- context.beginPath();
- context.strokeStyle = '#cccccc';
- context.strokeRect(10,10,150,100);
- // 旋转
- context.beginPath();
- context.strokeStyle = '#000000';
- context.strokeRect(200,50,100,50);
- // 默认旋转是根据0,0中心,使用translate可以按照自己的设置的中心旋转
- context.translate(250,75);
-
- context.rotate(45 * Math.PI /180);
- context.translate(-250, -75);
-
- context.beginPath();
- context.strokeStyle = '#cccccc';
- context.strokeRect(200,50,100,50);
-
- // transform 矩阵
- context.beginPath();
- context.strokeStyle = '#000000';
- context.strokeRect(10,10,150,100);
-
- context.transform(3,0,0,3,0,0);
- context.beginPath();
- context.strokeStyle = '#cccccc';
- context.strokeRect(10,10,150,100);
-
- }
渐变、图像组合效果、颜色翻转
XML/HTML Code复制内容到剪贴板
- var canvas = document.getElementById('canvas');
- if (canvas.getContext) {
- var context = canvas.getContext('2d');
- // 线性绘制渐变
- var grd = context.createLinearGradient(0,0,200,100);
- // postion 必须是0.1-1.0之间的竖直,表示渐变中颜色的地点相对地位,color表示颜色
- grd.addColorStop(0.1, "#00ff00");
- grd.addColorStop(0.8, "#ff0000");
-
- context.fillStyle = grd;
- context.fillRect(0,0, 200,100);
- // 径向渐变
- var grd = context.createRadialGradient(100,100,10,100,100,50);
- grd.addColorStop(0.1, "#00ff00");
- grd.addColorStop(0.8, '#ff0000');
- context.fillStyle = grd;
- context.fillRect(0,0,200,200);
- // 图像组合效果
- context.fillStyle = '#00ff00';
- context.fillRect(10,10,50,50);
- // 新绘图
- //context.globalCompositeOperation = "source-over";
- // 只绘制新内容,删除其他所有内容
- context.globalCompositeOperation = 'copy';
- // 图形重叠的地方,其颜色值相减后决定
- context.globalCompositeOperation = 'darker';
- // 画布上已经有的内容只会载和其他图形重叠的地方保留
- context.globalCompositeOperation = 'destination-atop';
- // 参考 http://www.w3school.com.cn/htmldom/prop_canvasrenderingcontext2d_globalcompositeoperation.asp
- context.beginPath();
- context.fillStyle = '#ff0000';
- context.arc(50,50,30,0, 2 * Math.PI);
- context.fill();
-
- // 颜色翻转
- var img = new Image();
-
- img.src = 'images/1.jpg';
- img.onload = function(){
- context.drawImage(img, 0,0, 1, 1);
- var imgData = context.getImageData(0,0, 1,1);
- var pixels = imgData.data;
- console.log(pixels);
- for(var i = 0, n = pixels.length; i < n; i+=4) {
- pixels[i] = 255 - pixels[i];
- pixels[i+1] = 255 - pixels[i + 1];
- pixels[i+2] = 255 - pixels[i + 2];
- }
- context.putImageData(imgData, 250, 0);
- }
- }
原文链接:https://m.jb51.net/html5/434489.html
本站部分内容转载于网络,版权归原作者所有,转载之目的在于传播更多优秀技术内容,如有侵权请联系QQ/微信:153890879删除,谢谢!