在canvas上面绘制图片--drawImage实例

关键点：

1、图片居中

2、其它

 <!DOCTYPE html>

 <html lang="zh-cn">

 <head>

     <meta charset="UTF-8">

     <title>- 课堂演示</title>

 </head>

 <style type="text/css">

 </style>

 <body>

     <canvas id="canvas" width="" height="" style="background: #A9A9A9">

             很抱歉，您的浏览器暂不支持HTML5的canvas

     </canvas>

     <input id="inps" type="range" value="">

     <script>

         var c=document.getElementById("canvas");

         var ctx=c.getContext("2d");

         var scaler=document.getElementById('inps')

         var scale=0.5;

         var img=new Image();

             img.src='../img/p3.jpg'

         function draw(){

             var w=c.width;

                 h=c.height;

                 sw=w*scale;

                 sh=h*scale;

             ctx.clearRect(,,canvas.width,canvas.height)

             ctx.drawImage(img,-sw/+w/,-sh/+h/,sw,sh)

         }

         img.onload=function(){

             draw()

         }

         scaler.onchange=function(e){

              scale=e.target.value/

              alert(scale)

              draw()

         }

     </script>

 </body>

 </html>

在canvas上面绘制图片--drawImage实例的更多相关文章

  1. canvas绘制图片drawImage学习

    不得不说,html5中的canvas真的非常强大,从图片处理,到视频处理,再到游戏开发,都能见到canvas的身影,然而,就这一个<canvas>标签,功能居然如此强大,这主要归功于can ...

  2. 前端使用html2canvas截图，在canvas上绘制图片及保存图片

    1.使用html2canvas 存在的问题: 不同的机型绘制位置不同的问题. 这个主要因为Html动态设置了html的dpr.(dpr可以解决屏幕显示不了1pxborder和无法显示小于12px的文字 ...

  3. html5 绘制图片 drawImage

    要在绘图上下文中绘制图片,可以使用 drawImage 方法.该方法有三种不同的参数: drawImage(image,dx,dy) drawImage(image,dx,dy,dw,dh) d ...

  4. Canvas中 drawImage绘制图片不显示

    在学习 html5中的 Canvas.drawImage时写了如下代码: <!doctype html> <html> <head><title>研究& ...

  5. canvas 2.0 图片绘制

    绘制图片drawImage 2013.02.21 by 十年灯·一条评论 本文属于<html5 Canvas画图系列教程> 这里的绘制图片是指把一张现成的图片,绘制到Canvas上面. 有 ...

  6. canvas - drawImage()方法绘制图片不显示的问题

    canvas有个很强大的api是drawImage()(w3c): 他的主要功能就是绘制图片.视频,甚至其他画布等.   问题: 慕名赶来,却一脚踩空,低头一看,地上一个大坑. 事情是这样的,在我看完 ...

  7. 软件项目技术点(8)—— canvas调用drawImage绘制图片

    AxeSlide软件项目梳理   canvas绘图系列知识点整理 html5中标签canvas,函数drawImage(): 使用drawImage()方法绘制图像.绘图环境提供了该方法的三个不同版本 ...

  8. 使用html5 canvas绘制图片

    注意:本文属于<html5 Canvas绘制图形入门详解>系列文章中的一部分.如果你是html5初学者,仅仅阅读本文,可能无法较深入的理解canvas,甚至无法顺畅地通读本文.请点击上述链 ...

  9. [js高手之路] html5 canvas系列教程 - 图片操作(drawImage,clip,createPattern)

    接着上文[js高手之路] html5 canvas系列教程 - 文本样式(strokeText,fillText,measureText,textAlign,textBaseline)继续,本文介绍的 ...

随机推荐

  1. BZOJ 1711 吃饭dining/Luogu P1402 酒店之王 拆点+最大流流匹配

    题意: (吃饭dining)有F种食物和D种饮料,每种食物或饮料只能供一头牛享用,且每头牛只享用一种食物和一种饮料.现在有n头牛,每头牛都有自己喜欢的食物种类列表和饮料种类列表,问最多能使几头牛同时享 ...

  2. 详细了解为什么支持Postman Chrome应用程序已被弃用？

    本地postman chrome插件确实也无法正常使用,只有Postman官方自己的软件应用程序可以使用.笔者多少追溯终于知道原因,并紧急上线了不同操作系统版本的Postman应用程序. 为什么近期P ...

  3. Matlab学习笔记（一）

    一.MATLAB概述 (一)运行环境 命令行窗口(Command Window) 表 1-1 数据显示格式设置(e_one_1.m) 格式 实例 说明 format short 3.1416 小数点后 ...

  4. 【Codeforces 444A】DZY Loves Physics

    [链接] 我是链接,点我呀:) [题意] 题意 [题解] 两个点的子图他们的"密度"是比所有联通生成子图都要大的 "只要胆子大,遇到什么问题都不怕!" [代码] ...

  5. 在linux服务器上搭建Struts2项目运行环境

    服务器上工作: 首先要先装java https://www.cnblogs.com/lamp01/p/8932740.html 然后装好tomcat https://www.cnblogs.com/y ...

  6. 使用IDEA部署Myeclipse项目----亲测有效

    使用IDEA部署Myeclipse项目-----https://blog.csdn.net/u010570551/article/details/51510447

  7. JavaEE JDBC 核心API

    JDBC接口核心的API @author ixenos java.sql.*   和  javax.sql.* |- Driver接口: 表示java驱动程序接口.所有的具体的数据库厂商要来实现此接口 ...

  8. Android 网络连接状态的监控

    有些应用需要连接网络,例如更新后台服务,刷新数据等,最通常的做法是定期联网,直接使用网上资源.缓存数据或执行一个下载任务来更新数据. 但是如果终端设备没有连接网络,或者网速较慢,就没必要执行这些任务. ...

  9. 树形DP 树的最小支配集，最小点覆盖与最大独立集

    最小支配集: 从V中选取尽量少的点组成一个集合,让V中剩余的点都与取出来的点有边相连. (点) 最小点覆盖: 从V中选取尽量少的点组成一个集合V1,让所有边(u,v)中要么u属于V1,要么v属于V1 ...

  10. HDU——1150 Machine Schedule

    Machine Schedule Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) ...