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

ExtJS GridPanel 根据条件改变字体颜色

Mar 08 Javascript

有关DOM元素与事件的3个谜题

Nov 11 Javascript

JavaScript(JS) 压缩 / 混淆 / 格式化批处理工具

Dec 10 Javascript

jQuery实现径向动画菜单效果

Jul 17 Javascript

AngularJS 实现弹性盒子布局的方法

Aug 30 Javascript

jQuery实现页面顶部下拉广告

Dec 30 Javascript

JavaScript三种绑定事件方式及相互之间的区别分析

Jan 10 Javascript

jQuery自动或手动图片切换效果

Oct 11 jQuery

基于jQuery实现无缝轮播与左右点击效果

May 13 jQuery

详解关于JSON.parse()和JSON.stringify()的性能小测试

Mar 14 Javascript

layui操作列按钮个数和文字颜色的判断实例

Sep 11 Javascript

前端 javascript 实现文件下载的示例

Nov 24 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