HTML5中Canvas实现图片缩放、翻转、颜色渐变的示例分析
这篇文章将为大家详细讲解有关HTML5中Canvas实现图片缩放、翻转、颜色渐变的示例分析,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
思茅ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景,ssl证书未来市场广阔!成为创新互联的ssl证书销售渠道,可以享受市场价格4-6折优惠!如果有意向欢迎电话联系或者加微信:18980820575(备注:SSL证书合作)期待与您的合作!
翻转、移动、平移、放大、缩小
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); } }
关于“HTML5中Canvas实现图片缩放、翻转、颜色渐变的示例分析”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。
新闻名称:HTML5中Canvas实现图片缩放、翻转、颜色渐变的示例分析
链接分享:http://scyanting.com/article/ppsesh.html