【HTML5】Canvas绘制简单图片教程


Posted in HTML / CSS onMay 13, 2016

获取Image对象,new出来

定义Image对象的src属性,参数:图片路径

定义Image对象的onload方法,调用context对象的drawImage()方法,参数:Image对象,x坐标,y坐标

 

重载方法,调用context对象的drawImage()方法,参数:Image对象,x坐标,y坐标,图像宽度,高度

【HTML5】Canvas绘制简单图片教程 

 

重载方法,调用context对象的drawImage()方法,

参数:

Image对象,图像上x坐标,图像上y坐标,矩形宽度,矩形高度,画在画布上的x坐标,画在画布上的y坐标,图像宽度,图像高度

【HTML5】Canvas绘制简单图片教程

 

调用context对象的getImageData()方法,得到像素颜色数组,参数:x坐标,y坐标,x宽度,y宽度

调用context对象的putImageData ()方法,设置图片颜色,参数:ImageData对象,x坐标,y坐标

【HTML5】Canvas绘制简单图片教程 

JavaScript Code复制内容到剪贴板
  1. var canvas=document.getElementById('myCanvas');   
  2.     var context=canvas.getContext("2d");   
  3.     //绘制图片   
  4.     var img=new Image();   
  5.     img.src="1.jpg";   
  6.     img.onload=function(){   
  7.        //context.drawImage(img,0,0);    
  8.        //context.drawImage(img,0,0,100,100);    
  9.        context.drawImage(img,180,160,100,100,0,0,100,100);   
  10.        var imagedata=context.getImageData(0,0,100,100);   
  11.        for (var i = 0, n = imagedata.data.length; i < n; i += 4) {   
  12.             imagedata.data[i + 0] = 255 - imagedata.data[i + 0]; //red;   
  13.             imagedata.data[i + 1] = 255 - imagedata.data[i + 1]; //green   
  14.             imagedata.data[i + 2] = 255 - imagedata.data[i + 2];    
  15.         }   
  16.        context.putImageData(imagedata,0,0);   
  17.     }  

以上这篇【HTML5】Canvas绘制简单图片教程就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
css3绘制百度的小度熊
Oct 29 HTML / CSS
CSS3实现超慢速移动动画效果非常流畅无卡顿
Jun 15 HTML / CSS
一款纯css3实现的tab选项卡的实列教程
Dec 11 HTML / CSS
CSS3制作苹果风格键盘特效
Feb 26 HTML / CSS
HTML5 canvas 基本语法
Aug 26 HTML / CSS
如何让IE9以下版本(ie6/7/8)认识html5元素
Apr 01 HTML / CSS
HTML5验证以及日期显示的实现详解
Jul 05 HTML / CSS
在HTML5中使用MathML数学公式的简单讲解
Feb 19 HTML / CSS
关于iframe跨域使用postMessage的实现
Oct 29 HTML / CSS
HTML如何让IMG自动适应DIV容器大小的实现方法
Feb 25 HTML / CSS
HTML5 Canvas实现放大镜效果示例
Mar 25 HTML / CSS
详解如何将 Canvas 绘制过程转为视频
Jan 25 HTML / CSS
HTML5实现页面切换激活的PageVisibility API使用初探
May 13 #HTML / CSS
HTML5中的强制下载属性download使用实例解析
May 12 #HTML / CSS
HTML5事件方法全部汇总
May 12 #HTML / CSS
详解HTML5中rel属性的prefetch预加载功能使用
May 06 #HTML / CSS
深入剖析HTML5 内联框架iFrame
May 04 #HTML / CSS
HTML5 Canvas绘制五星红旗
May 04 #HTML / CSS
字中字效果的实现【html5实例】
May 03 #HTML / CSS
You might like
web目录下不应该存在多余的程序(安全考虑)
2012/05/09 PHP
Linux编译升级php的详细方法
2013/11/04 PHP
PHP结合JQueryJcrop实现图片裁切实例详解
2014/07/24 PHP
php缓冲输出实例分析
2015/01/05 PHP
php数据库的增删改查 php与javascript之间的交互
2017/08/31 PHP
判断多个元素(RADIO,CHECKBOX等)是否被选择的原理说明
2009/02/18 Javascript
Web开发之JavaScript
2012/03/29 Javascript
js自动闭合html标签(自动补全html标记)
2012/10/04 Javascript
JS特权方法定义作用以及与公有方法的区别
2013/03/18 Javascript
提交按钮的name='submit'引起的js失效问题及原因
2015/02/25 Javascript
在JavaScript中使用开平方根的sqrt()方法
2015/06/15 Javascript
JS特效实现图片自动播放并可控的效果
2015/07/31 Javascript
AngularJS实现表单手动验证和表单自动验证
2015/12/09 Javascript
AngualrJS中每次$http请求时的一个遮罩层Directive
2016/01/26 Javascript
Node.js的MongoDB驱动Mongoose基本使用教程
2016/03/01 Javascript
AngularJS变量及过滤器Filter用法分析
2016/11/22 Javascript
使用electron制作满屏心特效的示例代码
2018/11/27 Javascript
小程序点击图片实现自动播放视频
2020/05/29 Javascript
vue增加强缓存和版本号的实现方法
2019/05/01 Javascript
JQuery+Bootstrap 自定义全屏Loading插件的示例demo
2019/07/03 jQuery
layer弹出框确定前验证:弹出消息框的方法(弹出两个layer)
2019/09/21 Javascript
解决vue-photo-preview 异步图片放大失效的问题
2020/07/29 Javascript
nuxt 服务器渲染动态设置 title和seo关键字的操作
2020/11/05 Javascript
python发送邮件示例(支持中文邮件标题)
2014/02/16 Python
python自动化测试之setUp与tearDown实例
2014/09/28 Python
Python 编码规范(Google Python Style Guide)
2018/05/05 Python
python实现最大优先队列
2019/08/29 Python
在python3中实现更新界面
2020/02/21 Python
Python栈的实现方法示例【列表、单链表】
2020/02/22 Python
python 绘制场景热力图的示例
2020/09/23 Python
全球最大的中文旅行网站:去哪儿网
2017/11/16 全球购物
Python如何定义一个函数
2015/09/01 面试题
数控专业毕业生求职信范文
2013/09/21 职场文书
美国旅游签证工作证明
2014/10/14 职场文书
简单的辞职信范文(2016最新版)
2015/05/12 职场文书
应届生个人的求职(自荐信范文2篇)
2019/08/23 职场文书