HTML-Canvas02
文字对齐方式 :
- 水平对齐
//是用 textAlign 属性设置水平对齐方式(默认坐标点)
ctx.textAlign = "start";
ctx.font = "30px Arial";
ctx.fillText("Hello World",100,50);//水平的三个坐标点分别为 start(a),left(a); center(b) ;end(c),right(c).
- 垂直对齐:
//是用 textBaseline 属性设置垂直对齐方式(默认坐标点)
ctx.textBaseline = "bottom";
ctx.font = "30px Arial";
ctx.fillText("Hello World",100,50);//垂直的三个坐标点分别为 bottom(a),alphabetic(b);middle(c) ;top(d),hanging(d),
//a 与 b 的差距等于canvas 最上边与浏览器最上边的差距。
图片操作:
- 通过 <img>标签//此方法要插入图片
//先在 html 中加入标签<img>插入图片
<img id="face" src="face.jpg" alt="The Face" width="240" height="240" /></br> //注意 img 最
后完整”/”,否则可能显示不出来。
*****************************************************************
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
//在 canvas 中获取<img>标签id
var img = document.getElementById("face");
//给对象 img 添加onload 事件监听
img.onload = function() {
//通过函数 drawImage 将图片绘制到画板上
ctx.drawImage(img,0,0);
}
</script> - 通过 JavaScript 的Image 对象//此方法不需插入图片
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
//建立 Image 对象
var img = new Image();
//通过 src 属性来加载图片
img.src = "face.jpg";
img.onload = function() {
ctx.drawImage(img,0,0);
}
</script> - drawImage 函数的三种函数模型 //注意参数只有这三种情况
//三个参数分别是要绘制的对象,对象在 canvas 中定位的坐标值 X、Y 。(图片
左上角点)
drawImage(image,dx,dy); //参数为3
//后两个参数分别是要绘制图片的宽度和高度。
drawImage(image,dx,dy,dw,dh); //参数为5
//多的四个参数分别是要截取图片部分的起始位置坐标 X、Y ,相对起始位置的
宽和高。(指的是在要绘制的图片上截取后绘制在 canvas 上)
drawImage(image,,sx,sy,sw,sh,dx,dy,dw,dh); //参数为 9
例子:
img.onload = function() {
ctx.drawImage(img,10,10);
ctx.drawImage(img,260,10,100,100);
ctx.drawImage(img,50,50,100,100,260,130,100,100);
} 利用 getImageData 和putImageData 绘制图片:
var img = new Image();
img.src = "face.jpg";
img.onload = function() {
//利用 drawImage 函数在canvas 上绘制图片。
ctx.drawImage(img,10,10);
///利用 getImageData 函数获取canvas 上的图片数据,四个参数分别为:起始位
置所谓坐标值 X、Y ,选择区域的长宽。(注意如果 canvas 区域中无绘制图片则
取得空白)
var imgData = ctx.getImageData(50,50,200,200); //获取的是已经绘制在 canvas 上的图
像
//利用函数 putImageData 将得到的像素数据绘制到画板上。七个参数分别是:
像素数据、绘制图片的起始坐标 X、Y ,获取图片的起始位置X、Y,获取图片
的长宽。(如果后面四个参数省略,则获取整个图片)
ctx.putImageData(imgData,10,260);
ctx.putImageData(imgData,200,260,50,50,100,100); //注意这里相差的四个参数
};
//在使用如 getImageData 这个函数时,为了阻止欺骗,浏览器会追踪 image data。
当你把一个 “跟 canvas 的域不同的 ”图片放到 canvas 上,这个canvas 就成为
“tainted”(被污染的,脏的 ),浏览器就不让你操作该 canvas 的任何像素。这对
于阻止多种类型的 XSS/CSRF 攻击(两种典型的跨站攻击)。我在进行一个本地
的html 网页,操作本地的一张图片时 chrome 浏览器也报错,可能是因为本地
网页的域为 file://,而本地图片肯定不是以 file://开头的,如windows 环境下的某
个图片为 : c:\tmp\test.png。(在测试 firbox 时没有问题)利用 createImageData 新建像素:
//createImageData(a,b) // 创建a*b 像素(长宽)的 imagaData 对象,不修改像素
的话为白色,
//代码
img.onload = function() {
var imageData = ctx.createImageData(100,100);
for(var i =0;i<imageData.data.length;i+=4) { //像素设置
imageData.data[i+0] = 255; //为红色
imageData.data[i+1] = 0;
imageData.data[i+2] = 0;
imageData.data[i+3] = 255;
}
ctx.putImageData(imageData,0,0);
}
//也可以这样设置
var imgData = ctx.getImageData(50,50,200,200);
var imageData = ctx.createImageData(imgData);// 得到的只是像素大小
变形:
- scale 函数:放大、缩小、翻转://利用 scale 函数实现图片的放大、缩小,两个参数分别对应 X、Y 轴坐标的放大
ctx.scale(3,3); //放在要绘画的图片的前面
ctx.beginPath();
strokeStyle = "#ccc";
//绘制了一个矩形,由于 scale 函数,实际绘制的矩形坐标为 (30,30,450,300).
ctx.strokeRect(10,10,150,100);
//利用 scale 函数实现图片的缩小。
ctx.scale(0.5,0.5);
//注意使用scale 之后对接下来所有绘制的图片都有效;恢复的方法:如使用
scale(2,2)之后,在想恢复的地方使用scale(0.5,0.5).;或者直接将scale 放在一个
js 函数里调用。 var img = new Image();
img.src = "face.jpg";
img.onload = function() {
ctx.drawImage(img,10,10);
//将函数 scaleY 轴参数设为负值,同时将 drawImage 函数的起始点 Y 轴设为负
值,使图片翻转。
ctx.scale(1,-1);
ctx.drawImage(img,250,-250); //此时注意翻转后图片最上面的点为原图片最下
面的点
};//步骤总结:1.使用scale(1-1)将图片以canvas 最上边对称映射2.在设置图片位置时相对原来要设置的位置,y 轴取相应的负值(这里如果想象成坐标轴区域的话,也可以使用translate 进行平移,不过注意移动的符号)。同理可以实现左右翻转。 //scale 翻转后的恢复步骤同样;如果像上面一样在一个函数内调用则无需。
- translate://利用 translate 函数进行平移,两个参数分别是 X、Y 轴上平移的距离。//注意此函数移动的是 canvas 的坐标原点。
ctx.translate(50,100);
ctx.beginPath();
ctx.strokeStyle = "#000";
//绘制的矩形平移后的坐标为( 60,100 ,150, 100)相当于平移起始点坐标
ctx.strokeRect(10,10,150,100);
//与scale 一样的恢复步骤。
//结合使用translate 与scale 也可以将绘制的图形进行翻转; - rotate:
ctx.beginPath();
ctx.strokeStyle = "#000";
ctx.strokeRect(200,50,100,50);
//利用 rotate 函数,参数为旋转的弧度。(默认以( 0,0 )为中心进行顺时针旋
转)
ctx.rotate(45*Math.PI/180);
ctx.beginPath();
ctx.strokeStyle = "#f00";
ctx.strokeRect(200,50,100,50);以自己为中心进行旋转
ctx.beginPath();
ctx.strokeStyle = "#000";
ctx.strokeRect(200,50,100,50);
//先用 translate 函数将canvas 的起始坐标移到矩形中心处
ctx.translate(250,75);
//再用 rotate 函数使图像绕起始点(矩形中心点)旋转
ctx.rotate(45*Math.PI/180);
//最后用 translate 函数将canvas 的起始坐标移回(0,0)
ctx.translate(-250,-75); ctx.beginPath();
ctx.strokeStyle = "#f00";
ctx.strokeRect(200,50,100,50);
//总结:一些如颜色设置,大小、位置变化等都是作用与全局的,所以使用save与restore;图形的绘制最后的呈现结果可以理解为先绘制好这个图形,在根据顺序经历之前定义的变化,最后呈现结果。
HTML-Canvas02的更多相关文章
- HTML5 Canvas圆盘抽奖应用(适用于Vue项目)
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8& ...
- canvas知识02:图片放大镜效果
效果截图: JS代码: <script> // 初始化canvas01和上下文环境 var cav01 = document.getElementById('cav01'); var cx ...
- OpenCV4之C++入门详解
OpenCV之C++入门 1.Visual Studio安装及环境配置与搭建 下载地址:https://my.visualstudio.com/Downloads?q=Visual,下载后按照说明安装 ...
随机推荐
- 最近为毛喜欢上C/C++语言了
旁观者李四说:此人大笨也!我用鼠标随便拖几个控件, 就是一个xxx管理系统了,你用C语言怕是一年也写不出来吧! 好吧,我要承认,讲这话的都已经是mS的奴才了,别的我不了解, MFC本身就是一个封闭的架 ...
- [Effective JavaScript 笔记]第32条:始终不要修改__proto__属性
__proto__属性很特殊,它提供了Object.getPrototypeOf方法所不具备的额外能力,即修改对象原型链接的能力. 避免修改__proto__属性的最明显的原因是可移植性的问题.并不是 ...
- 更改win7开机界面
按“win+R”组合键,打开运行框,在打开框中输入"regedit”,单击“确定”. 打开注册表编辑器,依次展开注册表里: “HKEY_LOCAL_MACHINE---SOFTWARE--- ...
- setVolumeControlStream(int streamType)
Android中有如下几种音频流: AudioManager.STREAM_MUSIC /** The audio stream for music playback */ AudioManager ...
- HDOJ 2097
#include<stdio.h> int func(int n,int k) { ; a=n; ) { b+=a%k; a=a/k; } return b; } int main() { ...
- luarocks install with lua5.1 and luajit to install lapis
# in luarocks source directory...git clone https://github.com/archoncap/luarockscd luarocks ./config ...
- Moebius集群:SQL Server一站式数据平台
一.Moebius集群的架构及原理 1.无共享磁盘架构 Moebius集群采用无共享磁盘架构设计,各个机器可以不连接一个共享的设备,数据可以存储在每个机器自己的存储介质中.这样每个机器就不需要硬件上的 ...
- python string与list互转
因为python的read和write方法的操作对象都是string.而操作二进制的时候会把string转换成list进行解析,解析后重新写入文件的时候,还得转换成string. >>&g ...
- error splicing file: file too large解决方法
FAT32格式的usb最大支持4G的文件,拷贝超过4G的文件需要把usb换成NTFS格式.
- JavaScript常用事件
一般事件 事件 浏览器支持 描述 onClick HTML: 2 | 3 | 3.2 | 4 Browser: IE3 | N2 | O3 鼠标点击事件,多用在某个对象控制的范围内的鼠标点击 on ...