编程 Javascript

js+html5绘制图片到canvas的方法

Posted in Javascript onJune 05, 2015

本文实例讲述了js+html5绘制图片到canvas的方法。分享给大家供大家参考。具体实现方法如下：

<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #c3c3c3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=new Image();
img.onload = function(){
ctx.drawImage(img,0,0);
};
img.src="img_flwr.png";
</script>
</body>
</html>

希望本文所述对大家的web程序设计有所帮助。

- Author -

pythoner

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

Javascript 类与静态类的实现

Apr 01 Javascript

UpdatePanel和Jquery冲突的解决方法

Apr 01 Javascript

纯js实现瀑布流展现照片(自动适应窗口大小)

Apr 08 Javascript

javascript解决innerText浏览器兼容问题思路代码

May 17 Javascript

Javascript实现获取窗口的大小和位置代码分享

Dec 04 Javascript

在ASP.NET MVC项目中使用RequireJS库的用法示例

Feb 15 Javascript

jquery+html仿翻页相册功能

Dec 20 Javascript

JS 实现随机验证码功能

Feb 15 Javascript

微信小程序动态显示项目倒计时效果

Jun 13 Javascript

老生常谈javascript的面向对象思想

Aug 22 Javascript

JS中使用textPath实现线条上的文字

Dec 25 Javascript

jQuery实现判断上传图片类型和大小的方法示例

Apr 11 jQuery

简介JavaScript中valueOf()方法的使用

Jun 05 #Javascript

jQuery插件jRumble实现网页元素抖动

Jun 05 #Javascript

js+html5获取用户地理位置信息并在Google地图上显示的方法

Jun 05 #Javascript

jquery插件NProgress.js制作网页加载进度条

Jun 05 #Javascript

JavaScript中toString()方法的使用详解

Jun 05 #Javascript

javascript实现倒计时并弹窗提示特效

Jun 05 #Javascript

jQuery插件EnPlaceholder实现输入框提示文字

Jun 05 #Javascript

You might like

php 图片上添加透明度渐变的效果

2009/06/29 PHP

实用的PHP带公钥加密类分享(每次加密结果都不一样哦)

2014/08/20 PHP

自己写的兼容低于PHP 5.5版本的array_column()函数

2014/10/24 PHP

使用PHPExcel操作Excel用法实例分析

2015/03/26 PHP

PHP实现可精确验证身份证号码的工具类示例

2018/05/31 PHP

PHP parse_ini_file函数的应用与扩展操作示例

2019/01/07 PHP

javascript类继承机制的原理分析

2009/09/12 Javascript

jQuery对象与DOM对象之间的转换方法

2010/04/15 Javascript

JQuery 学习笔记01 JQuery初接触

2010/05/06 Javascript

jquery URL参数判断，确定菜单样式

2010/05/31 Javascript

JS target与currentTarget区别说明

2011/08/28 Javascript

JavaScript中数组的排序、乱序和搜索实现代码

2011/11/30 Javascript

js抽奖实现随机抽奖代码效果

2013/12/02 Javascript

轻松创建nodejs服务器（4）：路由

2014/12/18 NodeJs

jQuery ajax 当async为false时解决同步操作失败的问题

2016/11/18 Javascript

深入浅析ES6 Class 中的 super 关键字

2017/10/20 Javascript

如何安装控制器JavaScript生成插件详解

2018/10/21 Javascript

Vue表单绑定的实例代码（单选按钮,选择框（单选时,多选时,用 v-for 渲染的动态选项）

2019/05/13 Javascript

在Angular中实现一个级联效果的下拉框的示例代码

2020/05/20 Javascript

python连接远程ftp服务器并列出目录下文件的方法

2015/04/01 Python

Python 实现中值滤波、均值滤波的方法

2019/01/09 Python

python实现Excel文件转换为TXT文件

2019/04/28 Python

浅析PEP570新语法: 只接受位置参数

2019/10/15 Python

Python 实现Serial 与STM32J进行串口通讯

2019/12/18 Python

python 解决flask 图片在线浏览或者直接下载的问题

2020/01/09 Python

Python制作简单的剪刀石头布游戏

2020/12/10 Python

html5中canvas学习笔记1-画板的尺寸与实际显示尺寸

2013/01/06 HTML / CSS

HTML5有哪些新特征

2015/12/01 HTML / CSS

请问软件开发中的设计模式你会使用哪些

2015/05/13 面试题

公司向个人借款协议书范本

2014/10/09 职场文书

安全生产隐患排查制度

2015/08/05 职场文书

CSS3 实现的图片悬停的切换按钮

2021/04/13 HTML / CSS

html5中sharedWorker实现多页面通信的示例代码

2021/05/07 Javascript

利用js实现简单开关灯代码

2021/11/23 Javascript

Lakehouse数据湖并发控制陷阱分析

2022/03/31 Oracle

Mybatis-Plus 使用 @TableField 自动填充日期

2022/04/26 Java/Android