在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. 洛谷——P3907 圈的异或

    P3907 圈的异或 无向图$dfs$找环,并判断边权异或和是否为0 #include<iostream> #include<cstdio> #include<algor ...

  2. 基于Vue的简单日历组件

    日历组件 由于移动端项目中需要用到日历组件,网上找了下,没看到几个合适的,就尝试着自己写一个.然后发现也不是很复杂,目前只做了最基本的功能,大家也可以拿去做做二次开发. 如何写一个日历组件 基础效果如 ...

  3. form 表单onclick事件 禁止表单form提交

    最近遇到一次处理form数据的过滤,采用了button的onclick事件来检查,发现return false后表单仍然提交了. 于是仔细研究了下onclick.onsubmit.submit集合函数 ...

  4. SpringMVC参数接收

    1 绑定简单类型 要根据id查询商品数据,需要从请求的参数中把请求的id取出来.Id应该包含在Request对象中.可以从Request对象中取id. public ModelAndView item ...

  5. flash-热风焊盘的制作

    计算部分: 热风焊盘的内径(ID)等于钻孔直径+20mil, 外径(OD)等于Anti-pad的直径,通常是比焊盘的直径大20mil. 开口宽度等于(OD-ID)/2+10mil,保留整数位. 如果焊 ...

  6. 接口测试工具-fiddler的运用

    本篇主要介绍一下fiddler的基本运用,包括查看接口请求方式,状态响应码,如何进行接口测试等 一．Fiddler的优点 独立的可以直接抓http请求 小巧.功能完善 快捷.启动就行 代理方便 二．什 ...

  7. Gym 100801 J. Journey to the “The World’s Start” DP+单调队列优化+二分

    http://codeforces.com/gym/100801 题目大意:有从左到右有n个车站,有n-1种车票,第i种车票一次最多可以坐 i 站(1<=i<=n)   每种票有固定的价钱 ...

  8. Ubuntu 16.04设置Redis为开机自动启动服务

    继上一篇文章http://www.cnblogs.com/EasonJim/p/7599941.html安装好Redis后,假设文件已经安装到/usr/local/redis目录下.假设我安装的版本为 ...

  9. Sqlserver数据库发送邮件

    目录 1. Sqlserver数据库发送邮件 1.1. 概念了解 1.2. 配置 1.3. 测试发送邮件 1.3.1. 代码测试 1.3.2. 工具测试 1.4. 查看邮件日志 1. Sqlserve ...

  10. C#中使用 Oracle的事务与存储过程

    1 存储过程 1.1 不带参数,没有返回值 创建表 create table test (ID number, NAME varchar2(), SEX varchar2(), AGE number, ...