js+html5绘制图片到canvas的方法

本文实例讲述了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>

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript动画特效与技巧汇总》《JavaScript运动效果与技巧汇总》及《JavaScript数据结构与算法技巧总结》

希望本文所述对大家的web程序设计有所帮助。

赞 (0)

相关推荐

  • js HTML5 canvas绘制图片的方法

    js HTML5 canvas绘制图片的方法

    本文实例为大家分享了HTML5 canvas绘制图片的具体代码,供大家参考,具体内容如下 demo.js window.onload=function() { createcanvas(); drawImage(); } function createcanvas() { var CANVAS=document.getElementById('mycanvas'); context=CANVAS.getContext('2d'); } function drawImage() { var img

  • HTML5 canvas 9绘制图片实例详解

    HTML5 canvas 9绘制图片实例详解

    绘制图片 Var image=new Image(); image.src=" http://img4.duitang.com/uploads/item/201406/25/20140625182321_4MTau.thumb.700_0.jpeg"; image.onload=function(){} Context.drawImage(image,x,y); Context.drawImage(image,x,y,w,h); Context.drawIamge(image,sx,s

  • js+html5绘制图片到canvas的方法

    本文实例讲述了js+html5绘制图片到canvas的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Your browser does not suppor

  • JS实现控制图片显示大小的方法【图片等比例缩放功能】

    JS实现控制图片显示大小的方法【图片等比例缩放功能】

    本文实例讲述了JS实现控制图片显示大小的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <hea

  • js HTML5多图片上传及预览实例解析（不含前端的文件分割）

    本文实例为大家分享了js HTML5多图片上传及预览实例,供大家参考,具体内容如下 主要运用  1.HTML5 files可以选择多文件,以及获取多文件信息  2.XMLHTTPRequest对象,发送HTTP传输请求  3.将每一个文件放在FormData,进行传输  4.利用readAsDataURL将图片内容直接变成url,放在img标签的src当中,生成可预览的图片 html+css+js代码 <!DOCTYPE html> <head> <meta http-equ

  • Node.js批量给图片加水印的方法

    Node.js批量给图片加水印的方法

    一.准备工作: 首先,你要阅读完这篇文章:http://www.jb51.net/article/97391.htm. 然后,我们安装node.js的一个模块:imageinfo. npm install imageinfo 二.直接上DEMO: 步骤如下: step1:文件夹结构 step2:JS代码 //引用文件系统模块 var fs = require("fs"); //引用imageinfo模块 var imageInfo = require("imageinfo&q

  • JS获取网页图片name属性的方法

    本文实例讲述了JS获取网页图片name属性的方法.分享给大家供大家参考.具体如下: 下面的JS代码可以用来获取网页图片的name属性 <!DOCTYPE html> <html> <body> <img id="compman" name="compman" src="compman.gif" alt="Computerman" width="107" height

  • 纯JS实现本地图片预览的方法

    本文实例讲述了纯JS实现本地图片预览的方法.分享给大家供大家参考.具体如下: 刚突然看到,网上已经有很多类似的代码,但没找到一个合适的.就拿自己以前写的写了一个.代码比较简洁,引用了一个我之前写的js.方法可以单独剥离出来使用,未测太多兼容.本机浏览器基本都支持(IE,FF,Chrome) index.html如下: <html> <head> <title>Test</title> <script type="text/javascript

  • JS+HTML5实现图片在线预览功能

    本文实例为大家分享了HTML5图片在线预览的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <title>HTML5图片预览</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="http://img9.ton

  • 基于vue+axios+lrz.js微信端图片压缩上传方法

    业务场景 微信端项目是基于Vux + Axios构建的,关于图片上传的业务场景有以下几点需求: 1.单张图片上传(如个人头像,实名认证等业务) 2.多张图片上传(如某类工单记录) 3.上传图片时期望能按指定尺寸压缩处理 4.上传图片可以从相册中选择或者直接拍照 遇到的坑 采用微信JSSDK上传图片 在之前开发的项目中(mui + jquery),有使用过微信JSSDK的接口上传图片,本想应该能快速迁移至此项目.事实证明编程没有简单的事: 1.按指定尺寸压缩图片 JSSDK提供的接口wx.choo

  • js+html5实现canvas绘制网页时钟的方法

    js+html5实现canvas绘制网页时钟的方法

    本文实例讲述了js+html5实现canvas绘制网页时钟的方法,画的是一个可用于网页的.带摆的钟表,可以通过按钮调整其大小和位置,具体实现内容如下 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Clock</title> <script type="tex

随机推荐