在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. EZOJ 宝石迷阵 建图+网络流匹配

    题面: 封印恶魔的地方可以看作是一个 n*m 的矩形,包含了 n*m 个祭坛,并且其 中有一些祭坛已经损坏了. 如果 i+j 为偶数,那么第 i 行第 j 列的祭坛只要没有损坏,就一定会封印有一个恶魔 ...

  2. 笔试算法题（01）：字符串倒置 & 八皇后问题

    出题:将字符串“ABCD1234efgh”进行前后对调: 分析: 常见的考查指针使用的案例,知道字符串长度之后,依次交换位置i以及位置(length-1-i)上的内容,直到重叠: 注意不能直接修改指针 ...

  3. [笔记] APIO 2018 Day1

    计算折纸 computaional origami 全息算法(???) margulis napkin problem 素数里有任意长的等差数列 xor gate Σxi or gate(exact ...

  4. C++ typedef用法小结 (转载)

    声明:本文转自charley_yang,点击此处查看原文 第一.四个用途 用途一: 定义一种类型的别名,而不只是简单的宏替换.可以用作同时声明指针型的多个对象.比如:char* pa, pb; // ...

  5. 零基础入门学习Python（1）--我和Python的第一次亲密接触

    前言 最近在学习Python编程语言,于是乎就在网上找资源.其中小甲鱼<零基础入门学习Python>试听了几节课,感觉还挺不错,里面的视频都是免费下载,小甲鱼讲话也挺幽默风趣的,所以呢,就 ...

  6. CentOS 7.4 源码编译安装 Redis

    一.CentOS 7.4  源码编译安装 Redis 1.下载源码并解压 wget http://download.redis.io/releases/redis-4.0.10.tar.gz tar ...

  7. sort 结构体 正数负数分开排序

    对于结构体排序的一点点记录,之前遇到过结构体排序,个人比较喜欢使用在结构体当中直接重载小于号的方法, 例如说: struct Node{ int index; int del; bool operat ...

  8. 九度oj 题目1192：回文字符串

    题目1192:回文字符串 时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:4391 解决:2082 题目描述: 给出一个长度不超过1000的字符串,判断它是不是回文(顺读,逆读均相同)的. ...

  9. vue2.0一个书城实例

    gitHub克隆地址 git clone https://github.com/Webxiaoyaun/vue-book.git 点击去Github下载 ## 一个书城 ## 有增加,修改,缓存,懒加 ...

  10. csu - 1537: Miscalculation (模拟题)

    http://acm.csu.edu.cn/OnlineJudge/problem.php?id=1537 因为给出的式子是必定合法的,只要用两个栈分别保存符号和数字.算出答案后和从左至右算的答案比对 ...