在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. jquery data属性 attr vs data

    html5的自定义data属性相信大家都不会陌生,有了它你可以绑定所需的数据到指定元素上.然后通过jquery设置.获取数据,简直开心的不行啊.想到设置.获取元素属性值,大家一定首先想到了jquery ...

  2. 10 行 Python 代码，批量压缩图片 500 张，简直太强大了

    本文原创并首发于公众号[Python猫],未经授权,请勿转载. 原文地址:https://mp.weixin.qq.com/s/5hpFDgjCpfb0O1Jg-ycACw 熟悉 "Pyth ...

  3. eclipse导入项目时报错不能运行问题的一个记录

    一直用学校的云桌面,但是还是有一些地方不是很方便,必须要校园网以及需要离线保存: 碰到的问题:重新安装和云桌面一样版本的jdk9.0.4,以及tomcat9.0.12,以及eclipse-oxygen ...

  4. Git 与其他系统 - Git 与 Subversion

    https://git-scm.com/book/zh/v1/Git-%E4%B8%8E%E5%85%B6%E4%BB%96%E7%B3%BB%E7%BB%9F-Git-%E4%B8%8E-Subve ...

  5. JavaEE JDBC 怎么加载驱动

    JDBC怎么加载驱动 @author ixenos 分析 1.JDBC是一套连接数据库的接口(放在java.util.sql.Driver类中),不同的数据库依此接口各自实现Java连接到数据库的操作 ...

  6. [luoguP1896] [SCOI2005]互不侵犯King（状压DP）

    传送门 先预处理出来一行中放置国王的所有情况和每种情况所用的国王个数. f[i][j][k]表示前i行放j个国王且最后一行的状态为k的方案数 状压DP即可 #include <cstdio> ...

  7. hdu 4871 树的分治+最短路记录路径

    /* 题意:给你一些节点和一些边,求最短路径树上是k个节点的最长的路径数. 解:1.求出最短路径树--spfa加记录 2.树上进行操作--树的分治,分别处理子树进行补集等运算 */ #include& ...

  8. Spring boot 搭配 JPA 生成表注释 和 字段注释

    原文地址:https://blog.csdn.net/qq_39996837/article/details/84717748 由于在数据库表反向生成过程中呢,需要通过jpa自动生成表,并且这个表必须 ...

  9. 和式 sigma的使用

    1.和式 0)艾佛森约定 艾佛森约定可以用来简化和式,艾佛森约定中的\([p(k)]\)就是一个限制条件,类似于一个\(bool\)函数,我们可以这样写 \[ \sum_{1<k<n}a_ ...

  10. 莫比乌斯反演套路二--(n/d)(m/d)给提出来--BZOJ3529: [Sdoi2014]数表

    一个数表上第i行第j列表示能同时整除i和j的自然数,Q<=2e4个询问,每次问表上1<=x<=n,1<=y<=m区域内所有<=a的数之和.n,m<=1e5,a ...