源码动态 源码评测 源码技巧 网站运营 网页制作 网站开发 安全相关 软件教程 IDC资讯 业界消息
高级搜索
关键字:Discuz!  Axure  团购系统
最新更新发布资源提建议收藏本站
当前位置:A5下载 > 资讯报道 > 网页制作 > HTML5 Canvas实现图片缩放、翻转、颜色渐变的代码示例

HTML5 Canvas实现图片缩放、翻转、颜色渐变的代码示例

作者:fang来源:a5源码浏览:时间:2016-02-29 11:29我要评论
这篇文章主要介绍了HTML5 Canvas实现图片缩放、翻转、颜色渐变的代码示例,充分利用到了坐标的操作,说明都写在代码注释里了很简明,需要的朋友可以参考下

翻转、移动、平移、放大、缩小

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实现图片缩放、翻转、颜色渐变的代码示例”的评论
资讯分类
本类热门资讯
  • 源码推荐
  • 软件推荐
关于我们联系我们发布资源广告服务合作伙伴网站地图版权声明与我们对话