Canvas入门(3):图像处理和渲染文本
资源:http://www.ido321.com/997.html
一、图像处理(非特别说明,全部结果均来自最新版Google)
在HTML 5中,不仅能够使用Canvas API绘制图形,也能够用于处理网络或磁盘中的图像文件。然后绘制在画布中。
绘制图像时,须要使用drawImage()方法:
drawImage(image,x,y):image是图像引用。x,y是绘制图像时在画布中的起始位置
drawImage(image,x,y,w,h):前三个同上,w,h是绘制时图像的宽度和高度,能够用于缩放图像
drawImage(image,sx,sy,sw,sh,dx,dy,dw.dh):将画布中已经绘制好的图像的所有或者局部拷贝到画布的还有一个位置。
sx,sy,sw,sh各自是原图中被复制区域的起始位置宽高,dx,dy,dw,dh表示复制后图像在画布中的起始位置和高宽。
1: // 获取canvas 的ID
2: var canvas = document.getElementById('canvas');
3: if (canvas == null)
4: {
5: return false;
6: }
7: // 获取上下文
8: var context = canvas.getContext('2d');
9: context.fillStyle = '#eeeeff';
10: context.fillRect(0,0,400,300);
11: var image = new Image();
12: image.src =
‘my.jpg’;
// onload事件实现边绘制边载入
13: image.onload = function()
14: {
15: drawImage(context,image);
16: };
17: function drawImage(context,image)
18: {
19: for (var i = 0; i < 7; i++) {
20: context.drawImage(image,0+i*50,0+i*25,100,100);
21: };
22: }
效果:
1、图像平铺
1: // 获取canvas 的ID
2: var canvas = document.getElementById('canvas');
3: if (canvas == null)
4: {
5: return false;
6: }
7: // 获取上下文
8: var context = canvas.getContext('2d');
9: context.fillStyle = '#eeeeff';
10: context.fillRect(0,0,400,300);
11: var image = new Image();
12: image.src = 'my.jpg';
13: // onload事件实现边绘制边载入
14: image.onload = function()
15: {
16: drawImage(canvas,context,image);
17: };
18: function drawImage(canvas,context,image)
19: {
20: // 平铺比例
21: var scale = 5;
22: // 缩小图像后宽度
23: var n1 = image.width / scale;
24: // 缩小图像后高度
25: var n2 = image.height / scale;
26: // 横向平铺个数
27: var n3 = canvas.width / n1;
28: // 纵向平铺个数
29: var n4 = canvas.height / n2;
30: for(var i = 0; i < n3; i++)
31: {
32: for(var j=0; j < n4; j++)
33: {
34: context.drawImage(image,i*n1,j*n2,n1,n2);
35: }
36: }
37: }
效果:
在HTML 5中,利用context.createPattern(image,type)也能够实现平铺,type取值同background-image的平铺值一样。
1: image.onload = function()
2: {
3: // drawImage(canvas,context,image);
4: var ptrn = context.createPattern(image,'repeat');
5: context.fillStyle = ptrn;
6: context.fillRect(0,0,400,300);
7: };
能相同实现平铺(图片没有缩放,所以是原图大小平铺)
2、图像裁剪
1: // 获取canvas 的ID
2: var canvas = document.getElementById('canvas');
3: if (canvas == null)
4: {
5: return false;
6: }
7: // 获取上下文
8: var context = canvas.getContext('2d');
9: // 获取渐变对象
10: var g1 = context.createLinearGradient(0,400,300,0);
11: // 加入渐变颜色
12: g1.addColorStop(0,'rgb(255,255,0)');
13: g1.addColorStop(1,'rgb(0,255,255)');
14: context.fillStyle = g1;
15: context.fillRect(0,0,400,300);
16: var image = new Image();
17: // onload事件实现边绘制边载入
18: image.onload = function()
19: {
20: drawImage(context,image);
21: };
22: image.src = 'my.jpg';
23: function drawImage(context,image)
24: {
25: create5StarClip(context);
26: context.drawImage(image,-50,-150,300,300);
27: }
28: function create5StarClip(context)
29: {
30: var dx = 100;
31: var dy = 0;
32: var s = 150;
33: // 创建路径
34: context.beginPath();
35: context.translate(100,150);
36: var x = Math.sin(0);
37: var y = Math.cos(0);
38: var dig = Math.PI/5 *4;
39: // context.moveTo(dx,dy);
40: for (var i = 0; i < 5; i++) {
41: var x = Math.sin(i * dig);
42: var y = Math.cos(i * dig);
43: context.lineTo(dx+x*s,dy+y*s);
44: }
45: context.clip();
46: }
效果:
3、像素处理
1: // 获取canvas 的ID
2: var canvas = document.getElementById('canvas');
3: if (canvas == null)
4: {
5: return false;
6: }
7: // 获取上下文
8: var context = canvas.getContext('2d');
9: var image = new Image();
10: image.src = 'my.jpg';
11: // onload事件实现边绘制边载入
12: image.onload = function()
13: {
14: context.drawImage(image,0,0);
15: // 获取原图像素
16: var imageData = context.getImageData(0,0,image.width,image.height);
17: for (var i = 0,n= imageData.data.length; i <n; i += 4) {
18: // red
19: imageData.data[i+0] = 255-imageData.data[i+0];
20: // green
21: imageData.data[i+1] = 255-imageData.data[i+2];
22: // blue
23: imageData.data[i+2] = 255-imageData.data[i+1];
24: };
25: // 将调整后的像素应用到图像
26: context.putImageData(imageData,0,0);
27: };
getImageData(sx,sy,sw,sh):表示获取像素区域的起始坐标和高宽。返回一个具有width,height,data等属性CanvasPixelArray对象。当中data属性存放像素数据的数组,形如[r1,g1,b1,a1,r2,g2,b2,a2……],r1,g1,b1,a1各自是第一个像素的红绿蓝值及透明度,以此类推。
putImageData(imagedata,dx,dy[,dirtyx,dirtyy,dirtyWidth,dirtyHeight]):将像素数据又一次绘制到图像上。imagedata是像素数组。dx,dy表示重绘的起始位置。后面四个參数是给出一个矩形的左上角坐标和高宽。
Canvas API的像素操作仅仅有部分浏览器支持。截图效果来自新版的火狐浏览器
二、绘制文字
1: // 获取canvas 的ID
2: var canvas = document.getElementById('canvas');
3: if (canvas == null)
4: {
5: return false;
6: }
7: // 获取上下文
8: var context = canvas.getContext('2d');
9: context.fillStyle = '#00f';
10: // 设置文字属性
11: context.font = 'italic 30px sans-serif';
12: context.textBaseline = 'top';
13: // 填充字符串
14: context.fillText('Canvas绘制文字',0,0);
15: context.font = 'bold 30px sans-serif';
16: // 轮廓字符串
17: context.strokeText('改变位置了',50,50);
fillText(string,x,y[,maxwidth]):前三个不解释。maxwidth表示显示文字的最大宽度。可防止文字溢出
strokeText(string,x,y[,maxwidth]:同上。
文字属性设置
font:设置字体
textAlign:水平对齐方式。取值但是start/end/left/right/center.默认是start
textBaseline:垂直对齐方式。取值但是top/hanging/middle/alphabetic/ideographic/bottom.默认是alphabetic
终于效果
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMTA0Mzg0Mw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">
下一篇:9个JQuery和5个JavaScript经典面试题
版权声明:本文博客原创文章。博客,未经同意,不得转载。
Canvas入门(3):图像处理和渲染文本的更多相关文章
- canvas学习笔记(中篇) -- canvas入门教程-- 颜色/透明度/渐变色/线宽/线条样式/虚线/文本/阴影/图片/像素处理
[中篇] -- 建议学习时间4小时 课程共(上中下)三篇 此笔记是我初次接触canvas的时候的学习笔记,这次特意整理为博客供大家入门学习,几乎涵盖了canvas所有的基础知识,并且有众多练习案例, ...
- Canvas入门(2):图形渐变和图像形变换
来源:http://www.ido321.com/986.html 一.图形渐变(均在最新版Google中测试) 1.绘制线性渐变 1: // 获取canvas 的ID 2: var canvas = ...
- HTML5 canvas入门
HTML5 Canvas入门 <canvas> 标签定义图形,比如图表和其他图像,您必须使用脚本来绘制图形.在画布上(Canvas)画一个红色矩形,渐变矩形,彩色矩形,和一些彩色的文字. ...
- Canvas入门(1):绘制矩形、圆、直线、曲线等基本图形
来源:http://www.ido321.com/968.html 一.Canvas的基础知识 Canvas是HTML 5中新增的元素,专门用于绘制图形.canvas元素就相当于一块“画布”,一块无色 ...
- canvas入门之时钟的实现
canvas 入门之作: 三步实现一个时钟: 直接上效果: step 1 : 背景制作首先制作从1-12的数字: var canvas = document.getElementById('ca ...
- 基于OpenGL编写一个简易的2D渲染框架-05 渲染文本
阅读文章前需要了解的知识:文本渲染 https://learnopengl-cn.github.io/06%20In%20Practice/02%20Text%20Rendering/ 简要步骤: 获 ...
- Canvas 入门案例
五. Canvas 入门案例 1. canvas 圆形绘制 <!DOCTYPE html> <html lang="en"> <head> ...
- Canvas入门笔记-实现极简画笔
今天学习了Html5 Canvas入门,已经有大神写得很详细了http://www.cnblogs.com/tim-li/archive/2012/08/06/2580252.html#8 在学习过后 ...
- 前端学习 node 快速入门 系列 —— 服务端渲染
其他章节请看: 前端学习 node 快速入门 系列 服务端渲染 在简易版 Apache一文中,我们用 node 做了一个简单的服务器,能提供静态资源访问的能力. 对于真正的网站,页面中的数据应该来自服 ...
随机推荐
- BP简单的理解神经网络
先用3类样本训练,在測试.. 刚開始学习的人有错的 地方,,请大家多多指导.. 一些好的博客: http://blog.csdn.net/starxu85/article/details/314353 ...
- GDI+学习笔记(六)渐变画笔
刷,顾名思义,它是一样的刷.提请设备,还记得常唱歌曲,"我是一个画家.." 好吧.跑题了. 本系列博客希望尽可能简单的描写叙述每项功能,而不希望把每一个參数都介绍的详具体细,假设须 ...
- 基于docker构建jenkins和svn服务(转)
码农们很定都知道svn的重要性,机器坏掉丢代码的惨痛教训想必很多人都有. jenkins可能很多人都不了解.这是一个持续集成的工具,在敏捷开发领域很流行:跟svn结合可以实现定期build.check ...
- 动态规划,而已! CodeForces 433B - Kuriyama Mirai's Stones
Kuriyama Mirai has killed many monsters and got many (namely n) stones. She numbers the stones from ...
- Eclipse-----jrebel实现jetty热部署
步骤1:下载jrebel将文件解压缩到任意文件夹 步骤2:配置jetty watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvaGVrZXdhbmd6aQ==/f ...
- 轻狂写的桌面日历秀NSIS脚本供大家参考学习
原文 轻狂写的桌面日历秀NSIS脚本供大家参考学习 现在共享桌面日历秀的NSIS脚本,以便交流学习.此脚本实现的功能如下: 7-Zip打开看不到内容.自动读取原安装路径,如果有则不允许更改.取得编译日 ...
- PC结束 Spark 二次开发 收到自己主动,并允许好友请求
本次Spark二次开发是为了客服模块的开发, 能让用户一旦点击该客服则直接自己主动加入好友.而客服放则需自己主动加入好友,不同弹出对话框进行允许,这方便的广大客服. 如今废话不多说,直接上代码. pa ...
- document.all使用
document.all 一个. document.all它是在页面中的所有元素的集合.例如: document.all(0)一个元素 二. document.all能够推断浏览器是否是IE ...
- 添加和删除行的能力table(能够编辑的表的内容)
页面文件 <html> <head> <meta http-equiv="Content-Type" content="text/html; ...
- php_DWZ-JUI中碰到的问题解决方法详解(thinkphp+dwz)
原文:php_DWZ-JUI中碰到的问题解决方法详解(thinkphp+dwz) 折腾了两天,dwz删除后,数据不能自动刷新,解决方案,直接看图 . 1. 删除.修改状态后无法刷新记录: 在dwz. ...