【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 相关文章推荐
纯CSS实现预加载动画效果
Sep 06 HTML / CSS
真正了解CSS3背景下的@font face规则
May 04 HTML / CSS
css背景图片的背景裁切、背景透明度、背景变换等效果运用
Dec 24 HTML / CSS
浅谈CSS3中display属性的Flex布局的方法
Aug 14 HTML / CSS
CSS3 二级导航菜单的制作的示例
Apr 02 HTML / CSS
CSS3实现缺角矩形,折角矩形以及缺角边框
Dec 20 HTML / CSS
canvas像素画板的实现代码
Nov 21 HTML / CSS
Html5移动端获奖无缝滚动动画实现示例
Jun 25 HTML / CSS
浅谈three.js中的needsUpdate的应用
Nov 12 HTML / CSS
HTML5中Canvas与SVG的画图原理比较
Jan 16 HTML / CSS
基于HTML5+CSS3实现简单的时钟效果
Sep 11 HTML / CSS
关于iframe跨域使用postMessage的实现
Oct 29 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
php 解析xml 的四种方法详细介绍
2016/10/26 PHP
简单解决微信文章图片防盗链问题
2016/12/17 PHP
php实现基于PDO的预处理示例
2017/03/28 PHP
Laravel 将数据表的数据导出,并生成seeds种子文件的方法
2019/10/09 PHP
初学Javascript的一些总结
2008/11/03 Javascript
JavaScript在IE中“意外地调用了方法或属性访问”
2008/11/19 Javascript
Jquery公告滚动+AJAX后台得到数据
2011/04/14 Javascript
jQuery+CSS实现菜单滑动伸展收缩(仿淘宝)
2013/03/22 Javascript
鼠标移动到图片名上,显示图片的简单实例
2013/07/14 Javascript
浅析JavaScript原型继承的陷阱
2013/12/03 Javascript
一张Web前端的思维导图分享
2015/07/03 Javascript
JavaScript 巧学巧用
2017/05/23 Javascript
web前端vue实现插值文本和输出原始html
2018/01/19 Javascript
ES10的13个新特性示例(小结)
2019/09/23 Javascript
js中火星坐标、百度坐标、WGS84坐标转换实现方法示例
2020/03/02 Javascript
JS call()及apply()方法使用实例汇总
2020/07/11 Javascript
vue实现移动端input上传视频、音频
2020/08/18 Javascript
js对象属性名驼峰式转下划线的实例代码
2020/09/17 Javascript
[01:03:54]Liquid vs IG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
分析Python编程时利用wxPython来支持多线程的方法
2015/04/07 Python
python关键字and和or用法实例
2015/05/28 Python
Python实现购物系统(示例讲解)
2017/09/13 Python
python机器学习理论与实战(二)决策树
2018/01/19 Python
PyQt5 多窗口连接实例
2019/06/19 Python
在keras里面实现计算f1-score的代码
2020/06/15 Python
基于python实现监听Rabbitmq系统日志代码示例
2020/11/28 Python
CSS3之边框多颜色Border-color属性使用示例
2013/10/11 HTML / CSS
纯css3实现的动画按钮的实例教程
2014/11/17 HTML / CSS
幼儿园六一儿童节主持节目串词
2014/03/21 职场文书
小学生新年寄语
2014/04/03 职场文书
3分钟英语演讲稿
2014/04/29 职场文书
机械工程学院大学生求职信
2014/05/25 职场文书
煤矿开采专业求职信
2014/07/08 职场文书
电子商务优秀毕业生求职信
2014/07/11 职场文书
导游词之五台山
2019/10/11 职场文书
5种 JavaScript 方式实现数组扁平化
2021/10/05 Javascript