canvas的图片绘制案例
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="container">
<canvas id="cavsElem">
你的浏览器不支持canvas,请升级浏览器
</canvas>
</div>
<script>
(function(){
var canvas=document.querySelector('#cavsElem');
var ctx=canvas.getContext('2d');
canvas.width=600;
canvas.height=600;
canvas.strokeStyle='1px solid #000';
var img=new Image();
img.src='a.jpg';
img.onload=function(){
var ow=img.width;
var oh=img.height;
// context.drawImage(img,x,y,width,height);
// 参数说明:width 绘制图片的宽度, height:绘制图片的高度
// 如果指定宽高,最好成比例,不然图片会被拉伸</em>
// 等比公式: toH = Height * toW / Width; //等比
// 设置高 = 原高度 * 设置宽/ 原宽度;
ctx.drawImage(img,100,100,400,400*oh/ow);
};
var img2=new Image();
img2.src='gameImgs/DMMban.png';
img2.onload=function(){
// context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
// 参数说明:
// sx,sy 裁剪的左上角坐标,
// swidth:裁剪图片的高度。 sheight:裁剪的高度
// 其他同上
ctx.drawImage(img2,40,65,40,65,315,295,40,65);
}
}());
</script>
</body>
</html>
canvas的图片绘制案例的更多相关文章
- canvas 2.0 图片绘制
绘制图片drawImage 2013.02.21 by 十年灯·一条评论 本文属于<html5 Canvas画图系列教程> 这里的绘制图片是指把一张现成的图片,绘制到Canvas上面. 有 ...
- 把一个base64编码的图片绘制到canvas (canvas的图片在转成dataurl)
把一个base64编码的图片绘制到canvas 需要引入jquery. <canvas id="myCanvas" width="800" height= ...
- Canvas 中drawImage 绘制不出图片
在使用Canvas的drawImage绘制图片时,却发现绘制不出图片,原因是图片是异步加载,图片加载完再绘制. //html <img src="1.png" /> & ...
- 利用canvas 导出图片
1.使用canvas绘制图片,并将图片导出. 在本地直接访问静态网页时,无法使用toDataURL(),需要将网页发布后,canvas才能使用toDataURL获取画布上的内容.因为canvas不允许 ...
- [JavaScript] canvas 合成图片和文字
Canvas Canvas 是 HTML5 新增的组件,就像一个画板,用 js 这杆笔,在上面乱涂乱画 创建一个 canvas <canvas id="stockGraph" ...
- js canvas获取图片base64 dataUrl
function getImgBase64(path, callback) { var img = new Image(); img.src = path; //图片加载完成后触发 img.onloa ...
- canvas给图片加水印
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- ImageDrawer.js图片绘制插件
ImageDrawer.js图片绘制插件有以下一些可用的配置参数. Duration:整个动画或每个步骤的绘制时间(以秒为单位) Background:在绘图时将颜色放在图片上 Callback:绘画 ...
- canvas将图片转成base64格式 以及 验证图片是否透明
logoImgUpload:function(file) { let self = this; self.formatUpload(file); let reader = new FileReader ...
随机推荐
- 一个死去的网站shige.laiyo.com
2017年4月份的时候,研一下刚刚开始. 爬了这个网站,现在这个网站已经关闭了,这些爬虫代码也就没用了,面向特定网站爬虫本身就是没有意义的. 爬author import requests from ...
- 支持向量机-SVM 学习
一 .支持向量机(SVM) 1.1 符号定义 标签 y 不再取 0 或 1,而是: y∈{-1, 1} 定义函数: 向量,没有第 0 个维度,b 为截距,预测函数定义为: 1.2 函数间隔与几何间隔 ...
- iOS 关于 GIF 图片那点事
前言 前几天我们项目组的群里提了这么一件事情:在我们的应用中存储动态的GIF图到相册,保存的图片变成了静态图片.而微博则能正确保存,可见这并不是一个技术不可实现的.前不久刚好看了苹果关于ImageIO ...
- MYSQL 5.5.32的单机多实例部署
Centos6.6安装并配置单机多实例的MYSQL数据库 本文介绍安装单机多实例的MYSQL数据库的环境如下: 系统平台环境:Centos6.6 Mysql软件包:Mysql-5.5.32.tar.g ...
- 用十条命令在一分钟内检查Linux服务器性能[转]
概述 通过执行以下命令,可以在1分钟内对系统资源使用情况有个大致的了解. uptime dmesg | tail vmstat 1 mpstat -P ALL 1 pidstat 1 iostat - ...
- sql的行转列(PIVOT)与列转行(UNPIVOT) webapi 跨域问题 Dapper 链式查询 扩展 T4 代码生成 Demo (抽奖程序)
sql的行转列(PIVOT)与列转行(UNPIVOT) 在做数据统计的时候,行转列,列转行是经常碰到的问题.case when方式太麻烦了,而且可扩展性不强,可以使用 PIVOT,UNPIVOT比 ...
- 一些实用的php库
Idiorm – 轻量级ORM库 Snappy – 快照/PDF库 Buzz – 简单的HTTP请求库 Omnipay – 支付处理库 ShellWrap – 优美的命令行包装器
- 更改jdk后,eclipse运行jsp出错
1.错误: 在Eclipse下启动tomcat的时候,报错为:Eclipse下启动tomcat报错:The archive: C:/Program Files(x86)/Java/jdk1.7.0_1 ...
- 使用Kotlin开发Android应用
1.Kotlin介绍 [Kotlin](https://kotlinlang.org/) Kotlin是一门基于JVM的编程语言,它正成长为Android开发中用于替代Java语言的继承者.Java是 ...
- 还没被玩坏的robobrowser(2)——安装及快速开始
安装robobrowser 注意:这里假设你知道如何使用pip安装python的库的知识,如果你不了解这一块的话,点这里获取帮助. 强烈推荐使用pip安装. pip install robobrows ...