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

jQuery中setTimeout的几种使用方法小结

Apr 07 Javascript

jquery实现效果比较好的table选中行颜色

Mar 25 Javascript

node.js中的fs.truncate方法使用说明

Dec 15 Javascript

javascript操作ul中li的方法

May 14 Javascript

WEB 前端开发中防治重复提交的实现方法

Oct 26 Javascript

Jquery鼠标放上去显示全名的实现方法

Feb 06 Javascript

移动端刮刮乐的实现方式（js+HTML5）

Mar 23 Javascript

微信小程序--onShareAppMessage分享参数用处(页面分享)

Apr 18 Javascript

深入理解Commonjs规范及Node模块实现

May 17 Javascript

JS检测是否可以访问公网服务器功能代码

Jun 19 Javascript

AngularJS的ng-click传参的方法

Jun 19 Javascript

微信JS-SDK实现微信会员卡功能(给用户微信卡包里发送会员卡)

Jul 25 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

ThinkPHP 防止表单重复提交的方法

2011/08/08 PHP

PHP中使用xmlreader读取xml数据示例

2014/12/29 PHP

php清除和销毁session的方法分析

2015/03/19 PHP

PHP 常用的header头部定义汇总

2015/06/19 PHP

php 二维数组快速排序算法的实现代码

2017/10/17 PHP

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

2019/01/07 PHP

jquery.alert 弹出式复选框实现代码

2009/06/15 Javascript

suggestion开发小结以及对键盘事件的总结（针对中文输入法状态）

2011/12/20 Javascript

JS+CSS制作DIV层可(最小化/拖拽/排序)功能实现代码

2013/02/25 Javascript

js点击更换背景颜色或图片的实例代码

2013/06/25 Javascript

node.js中的fs.write方法使用说明

2014/12/15 Javascript

jquery滚动加载数据的方法

2015/03/09 Javascript

javascript中 try catch用法

2015/08/16 Javascript

jQuery解决IE6、7、8不能使用 JSON.stringify 函数的问题

2016/05/31 Javascript

JQuery和HTML5 Canvas实现弹幕效果

2017/01/04 Javascript

详解nodejs微信公众号开发——2.自动回复

2017/04/10 NodeJs

js实现1,2,3,5数字按照概率生成

2017/09/12 Javascript

在vue-cli搭建的项目中增加后台mock接口的方法

2018/04/26 Javascript

javascript开发实现贪吃蛇游戏

2020/07/31 Javascript

[03:11]不朽宝藏三外观展示

2020/09/18 DOTA

Django1.7+python 2.78+pycharm配置mysql数据库教程

2014/11/18 Python

Flask框架的学习指南之制作简单blog系统

2016/11/20 Python

CentOS7.3编译安装Python3.6.2的方法

2018/01/22 Python

Python简单读写Xls格式文档的方法示例

2018/08/17 Python

python selenium执行所有测试用例并生成报告的方法

2019/02/13 Python

python GUI库图形界面开发之PyQt5输入对话框QInputDialog详细使用方法与实例

2020/02/27 Python

屏蔽Django admin界面添加按钮的操作

2020/03/11 Python

500行python代码实现飞机大战

2020/04/24 Python

python 录制系统声音的示例

2020/12/21 Python

详解Html5页面实现下载文件（apk、txt等）的三种方式

2018/10/22 HTML / CSS

美国运动鞋和运动服零售商：Footaction

2017/04/07 全球购物

阿里健康大药房：阿里自营网上药店

2017/08/01 全球购物

NYX Professional Makeup英国官网：美国平价专业彩妆品牌

2019/11/13 全球购物

PyQt QMainWindow的使用示例

2021/03/24 Python

大学生就业意向书范文

2014/04/01 职场文书

基层党员群众路线教育实践活动个人对照检查材料思想汇报

2014/10/05 职场文书