js HTML5 canvas绘制图片的方法


Posted in Javascript onSeptember 08, 2017

本文实例为大家分享了HTML5 canvas绘制图片的具体代码,供大家参考,具体内容如下

demo.js

window.onload=function() {
  createcanvas();
 
  drawImage();
}
 function createcanvas() {
   var CANVAS=document.getElementById('mycanvas');
   context=CANVAS.getContext('2d');
 }
 
function drawImage() {
  var img=new Image();
  img.onload=function() {
    context.drawImage(img,0,0,200,200 );
  }
  img.src="img5.jpg";
}

demo.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>canvas</title>
 
  <script type="text/javascript" src="demo.js"></script>
</head>
<body>
  <canvas id="mycanvas"  width="400" hight="400" >
<span>你的浏览器不支持canvas</span>
</canvas>
 
</body>
</html>

图片:

js HTML5 canvas绘制图片的方法

效果:

js HTML5 canvas绘制图片的方法

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
tbody元素支持嵌套的注意方法
Mar 24 Javascript
IE6/7/8/9不支持exec的简写方式
May 25 Javascript
artDialog 4.1.5 Dreamweaver代码提示/补全插件 附下载
Jul 31 Javascript
jQuery select表单提交省市区城市三级联动核心代码
Jun 09 Javascript
排序算法的javascript实现与讲解(99js手记)
Sep 28 Javascript
举例讲解AngularJS中的模块
Jun 17 Javascript
jQuery对象与DOM对象转换方法详解
May 10 Javascript
原生JS实现《别踩白块》游戏(兼容IE)
Feb 20 Javascript
利用node.js如何创建子进程详解
Dec 09 Javascript
关于TypeScript模块导入的那些事
Jun 12 Javascript
jQuery时间戳和日期相互转换操作示例
Dec 07 jQuery
VUE脚手架具体使用方法
May 20 Javascript
WebStorm ES6 语法支持设置&amp;babel使用及自动编译(详解)
Sep 08 #Javascript
React如何将组件渲染到指定DOM节点详解
Sep 08 #Javascript
javascript获取指定区间范围随机数的方法
Sep 08 #Javascript
原生js实现简单的模态框示例
Sep 08 #Javascript
javascript 面向对象实战思想分享
Sep 07 #Javascript
vue 封装自定义组件之tabal列表编辑单元格组件实例代码
Sep 07 #Javascript
用js实现before和after伪类的样式修改的示例代码
Sep 07 #Javascript
You might like
Php做的端口嗅探器--可以指定网站和端口
2006/10/09 PHP
php中将地址生成迅雷快车旋风链接的代码[测试通过]
2011/04/20 PHP
MySQL的FIND_IN_SET函数使用方法分享
2012/03/27 PHP
PHP实现生成带背景的图形验证码功能
2016/10/03 PHP
详解配置 Apache 服务器支持 PHP 文件的解析
2017/02/15 PHP
Yii2中简单的场景使用介绍
2017/06/02 PHP
CentOS7编译安装php7.1的教程详解
2019/04/18 PHP
Ext.MessageBox工具类简介
2009/12/10 Javascript
SOSO地图API使用(一)在地图上画圆实现思路与代码
2013/01/15 Javascript
教你如何在 Javascript 文件里使用 .Net MVC Razor 语法
2014/07/23 Javascript
初步认识JavaScript函数库jQuery
2015/06/18 Javascript
jquery实现图片上传前本地预览功能
2016/05/10 Javascript
JS输出空格的简单实现方法
2016/09/08 Javascript
Angularjs中三种数据的绑定策略(“@”,“=”,“&amp;”)
2016/12/23 Javascript
JavaScript30 一个月纯 JS 挑战中文指南(英文全集)
2017/07/23 Javascript
浅谈react 同构之样式直出
2017/11/07 Javascript
jquery判断滚动条距离顶部的距离方法
2018/09/05 jQuery
微信小程序在text文本实现多种字体样式
2019/11/08 Javascript
微信小程序激励式视频广告组件使用详解
2019/12/06 Javascript
[01:05:07]DOTA2-DPC中国联赛 正赛 DLG vs Dragon BO3 第一场2月1日
2021/03/11 DOTA
Python中format()格式输出全解
2019/04/12 Python
python字符串中匹配数字的正则表达式
2019/07/03 Python
python kafka 多线程消费者&amp;手动提交实例
2019/12/21 Python
Python实现CNN的多通道输入实例
2020/01/17 Python
HTML5仿手机微信聊天界面
2016/03/18 HTML / CSS
使用html5 canvas 画时钟代码实例分享
2015/11/11 HTML / CSS
Asics日本官网:鬼冢八喜郎创立的跑鞋运动品牌
2017/10/18 全球购物
全球工业:Global Industrial
2020/02/01 全球购物
医药营销专业个人自荐信
2013/09/29 职场文书
档案管理员岗位职责
2013/12/01 职场文书
测控技术与通信工程毕业生自荐信范文
2013/12/28 职场文书
决心书范文
2014/03/11 职场文书
分公司任命书
2014/06/06 职场文书
安全标语大全
2014/06/10 职场文书
房屋出售授权委托书
2014/10/12 职场文书
2016年幼儿园庆六一开幕词
2016/03/04 职场文书