编程 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 相关文章推荐

JS中confirm,alert,prompt函数使用区别分析

Apr 01 Javascript

jquery.cookie.js 操作cookie实现记住密码功能的实现代码

Apr 27 Javascript

javascript string字符串优化问题

Jul 31 Javascript

使用VS开发 Node.js指南

Jan 06 Javascript

jQuery实现二级下拉菜单效果

Jan 05 Javascript

JS与HTML结合使用marquee标签实现无缝滚动效果代码

Jul 05 Javascript

js判断radiobuttonlist的选中值显示/隐藏其它模块的实现方法

Aug 25 Javascript

d3.js入门教程之数据绑定详解

Apr 28 Javascript

Angular中管道操作符(|)的使用方法

Dec 15 Javascript

详解Vue.js使用Swiper.js在iOS

Sep 10 Javascript

深入学习JavaScript中的bom

May 27 Javascript

原生js实现贪吃蛇游戏

Oct 26 Javascript

简介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

教你在header中隐藏php的版本信息

2016/08/10 PHP

php版微信公众平台入门教程之开发者认证的方法

2016/09/26 PHP

PHP实现对图片的反色处理功能【测试可用】

2018/02/01 PHP

jquery checkbox全选、取消全选实现代码

2010/03/05 Javascript

jQuery去掉字符串起始和结尾的空格(多种方法实现)

2013/04/01 Javascript

文本框倒叙输入让输入框的焦点始终在最开始的位置

2014/09/01 Javascript

Javascript 构造函数详解

2014/10/22 Javascript

JavaScript中window.showModalDialog()用法详解

2014/12/18 Javascript

JavaScript中检查对象property的存在性方法介绍

2014/12/30 Javascript

jQuery-1.9.1源码分析系列（十）事件系统之事件包装

2015/11/20 Javascript

JavaScript实现页面跳转的几种常用方式

2015/11/28 Javascript

动态加载js文件简单示例

2016/04/21 Javascript

深入理解jquery跨域请求方法

2016/05/18 Javascript

nodejs初始化init的示例代码

2018/10/10 NodeJs

Vue指令v-for遍历输出JavaScript数组及json对象的常见方式小结

2019/02/11 Javascript

Vue函数式组件-你值得拥有

2019/05/09 Javascript

使用python绘制人人网好友关系图示例

2014/04/01 Python

介绍Python中的一些高级编程技巧

2015/04/02 Python

使用Django的模版来配合字符串翻译工作

2015/07/27 Python

多版本Python共存的配置方法

2017/05/22 Python

Python基于opencv调用摄像头获取个人图片的实现方法

2019/02/21 Python

python绘制漏斗图步骤详解

2019/03/04 Python

基于Django实现日志记录报错信息

2019/12/17 Python

python 引用传递和值传递详解(实参,形参)

2020/06/05 Python

python 解决pycharm运行py文件只有unittest选项的问题

2020/09/01 Python

纯CSS3实现图片无间断轮播效果

2016/08/25 HTML / CSS

Nike比利时官网：Nike.com (BE)

2019/02/07 全球购物

书法比赛获奖感言

2014/02/10 职场文书

工作失误检讨书（经典集锦版）

2014/10/17 职场文书

就业推荐表导师评语

2014/12/31 职场文书

导游欢迎词范文

2015/01/23 职场文书

主题班会开场白

2015/06/01 职场文书

入党团支部推荐意见

2015/06/02 职场文书

JavaScript实例 ODO List分析

2022/01/22 Javascript

CSS SandBox应用场景及常见问题

2022/06/25 HTML / CSS

Win11 PC上的Outlook搜索错误怎么办?

2022/07/15 数码科技