编程 Javascript

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绘制图片的方法

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

js HTML5 canvas绘制图片的方法

- Author -

1点

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

Javascript 相关文章推荐

多种方法实现360浏览器下禁止自动填写用户名密码

Jun 16 Javascript

Javascript基础教程之switch语句

Jan 18 Javascript

javascript实现动态表头及表列的展现方法

Jul 14 Javascript

JavaScript数组对象实现增加一个返回随机元素的方法

Jul 27 Javascript

js限制文本框的输入内容代码分享（3类）

Aug 20 Javascript

JS实现超精简响应鼠标显示二级菜单代码

Sep 12 Javascript

浅谈js中的in-for循环

Jun 28 Javascript

Bootstrapvalidator校验、校验清除重置的实现代码(推荐)

Sep 28 Javascript

Javascript实现时间倒计时效果

Jul 15 Javascript

详解Vue微信公众号开发踩坑全记录

Aug 21 Javascript

Vue 中使用vue2-highcharts实现top功能的示例

Mar 05 Javascript

TypeScript类型声明书写详解

Aug 28 Javascript

WebStorm ES6 语法支持设置&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页面防重复提交方法总结

2013/11/25 PHP

ThinkPHP实现跨模块调用操作方法概述

2014/06/20 PHP

php约瑟夫问题解决关于处死犯人的算法

2015/03/23 PHP

PHP解压tar.gz格式文件的方法

2016/02/14 PHP

PHP框架Laravel插件Pagination实现自定义分页

2020/04/22 PHP

PHP Laravel 上传图片、文件等类封装

2017/08/16 PHP

PHP代码重构方法漫谈

2018/04/17 PHP

sina的lightbox效果。

2007/01/09 Javascript

javascript 鼠标拖动图标技术

2010/02/07 Javascript

理解Javascript_08_函数对象

2010/10/15 Javascript

Jquery下:nth-child(an+b)的使用注意

2011/05/28 Javascript

js数组常用操作方法小结(增加,删除,合并,分割等)

2016/08/02 Javascript

jQuery tagsinput在h5邮件客户端中应用详解

2016/09/26 Javascript

laydate.js日期时间选择插件

2017/01/04 Javascript

微信小程序商城项目之商品属性分类（4）

2017/04/17 Javascript

QRCode.js：基于JQuery的生成二维码JS库的使用

2017/06/23 jQuery

使用Vuex解决Vue中的身份验证问题

2018/09/28 Javascript

Vue学习之axios的使用方法实例分析

2020/01/06 Javascript

浅谈JavaScript中this的指向问题

2020/07/28 Javascript

解决Vue大括号字符换行踩的坑

2020/11/09 Javascript

[56:48]FNATIC vs EG 2019国际邀请赛小组赛 BO2 第二场 8.15

2019/08/16 DOTA

详解Python中列表和元祖的使用方法

2015/04/25 Python

Python实现将数据框数据写入mongodb及mysql数据库的方法

2018/04/02 Python

对python 判断数字是否小于0的方法详解

2019/01/26 Python

Django如何使用第三方服务发送电子邮件

2019/08/14 Python

基于Python解密仿射密码

2019/10/21 Python

Python 中如何实现参数化测试的方法示例

2019/12/10 Python

Python中openpyxl实现vlookup函数的实例

2020/10/28 Python

python 爬取英雄联盟皮肤并下载的示例

2020/12/04 Python

PUMA官方商城：世界领先的运动品牌之一

2016/11/16 全球购物

世界首屈一指的在线男士内衣权威：HisRoom

2017/08/05 全球购物

Skyscanner波兰：廉价航班

2017/11/07 全球购物

上课打牌的检讨书

2014/02/15 职场文书

副职竞争上岗演讲稿

2014/05/12 职场文书

颂军魂爱军营演讲稿

2014/09/13 职场文书

NGINX 权限控制文件预览和下载的实现原理

2022/01/18 Servers