在canvas上面绘制图片--drawImage实例
在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实例的更多相关文章
- canvas绘制图片drawImage学习
不得不说,html5中的canvas真的非常强大,从图片处理,到视频处理,再到游戏开发,都能见到canvas的身影,然而,就这一个<canvas>标签,功能居然如此强大,这主要归功于can ...
- 前端使用html2canvas截图,在canvas上绘制图片及保存图片
1.使用html2canvas 存在的问题: 不同的机型绘制位置不同的问题. 这个主要因为Html动态设置了html的dpr.(dpr可以解决屏幕显示不了1pxborder和无法显示小于12px的文字 ...
- html5 绘制图片 drawImage
要在绘图上下文中绘制图片,可以使用 drawImage 方法.该方法有三种不同的参数: drawImage(image,dx,dy) drawImage(image,dx,dy,dw,dh) d ...
- Canvas中 drawImage绘制图片不显示
在学习 html5中的 Canvas.drawImage时写了如下代码: <!doctype html> <html> <head><title>研究& ...
- canvas 2.0 图片绘制
绘制图片drawImage 2013.02.21 by 十年灯·一条评论 本文属于<html5 Canvas画图系列教程> 这里的绘制图片是指把一张现成的图片,绘制到Canvas上面. 有 ...
- canvas - drawImage()方法绘制图片不显示的问题
canvas有个很强大的api是drawImage()(w3c): 他的主要功能就是绘制图片.视频,甚至其他画布等. 问题: 慕名赶来,却一脚踩空,低头一看,地上一个大坑. 事情是这样的,在我看完 ...
- 软件项目技术点(8)—— canvas调用drawImage绘制图片
AxeSlide软件项目梳理 canvas绘图系列知识点整理 html5中标签canvas,函数drawImage(): 使用drawImage()方法绘制图像.绘图环境提供了该方法的三个不同版本 ...
- 使用html5 canvas绘制图片
注意:本文属于<html5 Canvas绘制图形入门详解>系列文章中的一部分.如果你是html5初学者,仅仅阅读本文,可能无法较深入的理解canvas,甚至无法顺畅地通读本文.请点击上述链 ...
- [js高手之路] html5 canvas系列教程 - 图片操作(drawImage,clip,createPattern)
接着上文[js高手之路] html5 canvas系列教程 - 文本样式(strokeText,fillText,measureText,textAlign,textBaseline)继续,本文介绍的 ...
随机推荐
- Python 中的变量还能这样理解(白话)
一.案例分析 1.思考 计算软件测试大佬柠檬小姐姐,每月能存多少钱 # 计算软件测试大佬柠檬小姐姐,每月能存多少钱 # 坐标:深圳 # 2018年1月份 # 房租水电 4000元 # 伙食费 1000 ...
- 集训第四周(高效算法设计)E题 (区间覆盖问题)
UVA10382 :http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=21419 只能说这道题和D题是一模一样的,不过要进行转化, ...
- IDEA 2018集成MyBatis Generator 插件 详解
1.修改maven的pom文件 只需要将如下依赖添加到pom.xml文件中即可.(注意此处是以plugin的方式,放在<plugins> </plugins>中间即可) < ...
- HDU 2147 找规律博弈
题目大意: 从右上角出发一直到左下角,每次左移,下移或者左下移,到达左下角的人获胜 到达左下角为必胜态,那么到达它的所有点都为必败态,每个点的局势都跟左,下,左下三个点有关 开始写了一个把所有情况都计 ...
- [1143] [CTSC2008]祭祀river(最大独立集 || 偏序集最大反链)
传送门 网上说这是偏序集最大反链,然而我实在不理解. 所以我换了一个思路,先用floyd,根据点的连通性连边, 问题就转换成了找出最多的点,使任意两个点之间不连边,也就是最大独立集. ——代码 #in ...
- ajax异步获取数据后动态向表格中添加数据(行)
因为某些原因,项目中突然需要做自己做个ajax异步获取数据后动态向表格中添加数据的页面,网上找了半天都没有 看到现成的,决定自己写个例子 1.HTML页面 <!doctype html> ...
- php框架之自动加载与统一入口
现在PHP有很多的框架,基本都是以MVC为基础进行设计的.其实很多框架(像thinkphp,zf,symfont等)都有两个特性,自动加载类文件和统一入口.这里就简单实现以上两个特性. 假设PHP使用 ...
- 【Tomcat】tomcat logs 目录下各日志文件的含义
tomcat每次启动时,自动在logs目录下生产以下日志文件,按照日期自动备份.可以帮助我们更好的找出错误. 一. 认识各种目录的作用及记录的信息 目录
- poj_3006_Dirichlet's Theorem on Arithmetic Progressions_201407041030
Dirichlet's Theorem on Arithmetic Progressions Time Limit: 1000MS Memory Limit: 65536K Total Submi ...
- nyoj_176_整数划分(二)_201404261715
整数划分(二) 时间限制:1000 ms | 内存限制:65535 KB 难度:3 描述 把一个正整数m分成n个正整数的和,有多少种分法? 例:把5分成3个正正数的和,有两种分法: 1 1 3 ...