HTML5权威指南笔记：35-使用canvas元素（1）
来源：互联网 发布：江东是哪里 知乎 编辑：程序博客网 时间：2024/05/16 09:49
1 开始使用canvas 元素
例子：
<!DOCTYPE HTML><html> <head> <title>Example</title> <style> canvas {border: medium double black; margin: 4px} </style> </head> <body> <!--canvas元素里的内容会在浏览器不支持此元素时作为备用内容显示--> <canvas width="500" height="200"> Your browser doesn't support the <code>canvas</code> element </canvas> </body></html>2 获取画布的上下文
为了在canvas元素上绘图，我们需要获得一个上下文对象。
HTMLCanvasElement对象：
例子：为画布获取二维上下文对象
<!DOCTYPE HTML><html> <head> <title>Example</title> <style> canvas {border: medium double black; margin: 4px} </style> </head> <body> <canvas id="canvas" width="500" height="100"> Your browser doesn't support the <code>canvas</code> element </canvas> <script> //传递2d表示获取二维上下文对象 var ctx = document.getElementById("canvas").getContext("2d"); //获取后就可以进行绘图 ctx.fillRect(10, 10, 50, 50); </script> </body></html>3 绘制矩形
简单的图形方法：
x,y表示从canvas元素左上角算起的偏移量，w和h参数指定了待绘制矩形的宽度和高度。
例子：使用fillRect和strokeRect方法
<!DOCTYPE HTML><html> <head> <title>Example</title> <style> canvas {border: thin solid black; margin: 4px} </style> </head> <body> <canvas id="canvas" width="500" height="140"> Your browser doesn't support the <code>canvas</code> element </canvas> <script> 获取2d上下文对象 var ctx = document.getElementById("canvas").getContext("2d"); var offset = 10; var size = 50; var count = 5; for (var i = 0; i < count; i++) { //绘制实心矩形 ctx.fillRect(i * (offset + size) + offset, offset, size, size); //绘制空心矩形 ctx.strokeRect(i * (offset + size) + offset, (2 * offset) + size, size, size); //清空一部分矩形 ctx.clearRect(i * (offset + size) + offset, offset + 5, size, size - 10); } </script> </body></html>4 设置画布绘制状态
基本的绘制状态属性：
4.1 设置线条连接样式
三个值：round 、bevel和miter , 默认值是miter 。
例子：
<!DOCTYPE HTML><html> <head> <title>Example</title> <style> canvas {border: thin solid black; margin: 4px} </style> </head> <body> <canvas id="canvas" width="500" height="140"> Your browser doesn't support the <code>canvas</code> element </canvas> <script> var ctx = document.getElementById("canvas").getContext("2d"); ctx.lineWidth = 20; ctx.lineJoin = "round"; ctx.strokeRect(20, 20, 100, 100); ctx.lineJoin = "bevel"; ctx.strokeRect(160, 20, 100, 100); ctx.lineJoin = "miter"; ctx.strokeRect(300, 20, 100, 100); </script> </body></html>4.2 设置填充和笔触样式
<canvas id="canvas" width="500" height="140"> Your browser doesn't support the <code>canvas</code> element</canvas><script> var ctx = document.getElementById("canvas").getContext("2d"); //可以使用css颜色值来指定一种颜色，名称或颜色模型都可以。 ctx.fillStyle = "black"; ctx.strokeStyle = "rgb(0,0,0)";</script>4.3 使用渐变
渐变方法：
CanvasGradient 的方法：
addColorStop(<position>, <color>)：给渐变的梯度线添加一种纯色，返回void。
4.3.1 使用线性渐变
<!DOCTYPE HTML><html> <head> <title>Example</title> <style> canvas {border: thin solid black; margin: 4px} </style> </head> <body> <canvas id="canvas" width="500" height="140"> Your browser doesn't support the <code>canvas</code> element </canvas> <script> var ctx = document.getElementById("canvas").getContext("2d"); //创建线性渐变，提供的四个值会作为画布上一条线段的开始和结束坐标 var grad = ctx.createLinearGradient(0, 0, 500, 140); //添加线性渐变属性，0表示开始，1表示终点 grad.addColorStop(0, "red"); grad.addColorStop(0.5, "white"); grad.addColorStop(1, "black"); //定义渐变并添加颜色点之后，就可以用CanvasGradient对象来设置fillStyle或strokeStyle属性 ctx.fillStyle = grad; //最后，就可以绘制一个图形 ctx.fillRect(0, 0, 500, 140); </script> </body></html>4.3.2 使用径向渐变
<!DOCTYPE HTML><html> <head> <title>Example</title> <style> canvas {border: thin solid black; margin: 4px} </style> </head> <body> <canvas id="canvas" width="500" height="140"> Your browser doesn't support the <code>canvas</code> element </canvas> <script> var ctx = document.getElementById("canvas").getContext("2d"); //创建径向渐变，渐变的起点由第一个圆定义，终点则是第二个圆，在两者之间添加颜色点。 //起点圆的圆心坐标（第一个和第二个参数） //起点圆的半径（第三个参数） //终点圆的圆心坐标（第四个和第五个参数） //终点圆的半径（第六个参数） var grad = ctx.createRadialGradient(250, 70, 20, 200, 60, 100); //添加径向渐变属性，0表示开始，1表示终点 grad.addColorStop(0, "red"); grad.addColorStop(0.5, "white"); grad.addColorStop(1, "black"); //定义渐变并添加颜色点之后，就可以用CanvasGradient对象来设置fillStyle或strokeStyle属性 ctx.fillStyle = grad; //最后，就可以绘制一个图形 ctx.fillRect(0, 0, 500, 140); </script> </body></html>4.5 使用图案
2D绘图上下文定义了对三种图案类型的支持：图像、视频和画布。但是只有图像得以实现。
<!DOCTYPE HTML><html> <head> <title>Example</title> <style> canvas {border: thin solid black; margin: 4px} </style> </head> <body> <canvas id="canvas" width="500" height="140"> Your browser doesn't support the <code>canvas</code> element </canvas> <!--需要有一个img元素，它对用户是不可见的--> <img id="banana" hidden src="banana-small.png"/> <script> var ctx = document.getElementById("canvas").getContext("2d"); //获取img元素 var imageElem = document.getElementById("banana"); //将获取的img元素作为创建图像的第一个参数。 //第二个参数必须是repeat，repeat-x，repeat-y，no-repeat中的一个 var pattern = ctx.createPattern(imageElem, "repeat"); //最后就可以进行绘制了 ctx.fillStyle = pattern; ctx.fillRect(0, 0, 500, 140); </script> </body></html>5 保存和恢复绘制状态
使用下面的方法保存和恢复绘制状态
- save()：保存绘制状态屈性的值，并把它们推入状态栈
- restore()：取出状态栈的第一组值，用它们来设置绘制状态
例子：
<!DOCTYPE HTML><html> <head> <title>Example</title> <style> canvas {border: thin solid black; margin: 4px} </style> </head> <body> <canvas id="canvas" width="500" height="140" preload="auto"> Your browser doesn't support the <code>canvas</code> element </canvas> <div> <button>Save</button> <button>Restore</button> </div> <script> var ctx = document.getElementById("canvas").getContext("2d"); var grad = ctx.createLinearGradient(500, 0, 500, 140); grad.addColorStop(0, "red"); grad.addColorStop(0.5, "white"); grad.addColorStop(1, "black"); var colors = ["black", grad, "red", "green", "yellow", "black", "grey"]; var cIndex = 0; ctx.fillStyle = colors[cIndex]; draw(); var buttons = document.getElementsByTagName("button"); for (var i = 0; i < buttons.length; i++) { buttons[i].onclick = handleButtonPress; } function handleButtonPress(e) { switch (e.target.innerHTML) { //保存当前的绘制状态 case 'Save': ctx.save(); cIndex = (cIndex + 1) % colors.length; ctx.fillStyle = colors[cIndex]; draw(); break; //恢复之前的绘制状态 case 'Restore': cIndex = Math.max(0, cIndex -1); ctx.restore(); draw(); break; } } function draw() { ctx.fillRect(0, 0, 500, 140); } </script> </body></html>6 绘制图像
可以用drawlmage方法在画布上绘制图像
- 这个方法需要三个、五个或九个参数。
- 第一个参数始终是图像的来源，它可以是代表img 、video或其他canvas元素的DOM对象。
- 使用三个参数时，第二个和第三个参数给出了图像应当在画布上绘制的坐标。
- 使用五个参数时，额外的参数指定了应当给图像绘制的宽度和高度，以代替原始尺寸。
- 使用九个参数时：第二个和第三个参数是在源图像内的偏移量；第四个和第五个参数是源图像所需使用区域的宽度和高度；第六个和第七个参数指定了所选区域的左上角将要在画布上绘制的坐标；第八个和第九个参数指定了所选区域将要绘制的宽度和高度。
例子：对视频进行截图
<!DOCTYPE HTML><html> <head> <title>Example</title> <style> canvas {border: thin solid black} body > * {float:left;} </style> </head> <body> <video id="vid" src="timessquare.webm" controls preload="auto" width="360" height="240"> Video cannot be displayed </video> <div> <button id="pressme">Snapshot</button> </div> <canvas id="canvas" width="360" height="240"> Your browser doesn't support the <code>canvas</code> element </canvas> <script> var ctx = document.getElementById("canvas").getContext("2d"); var imageElement = document.getElementById("vid"); //获取视频video对象后，点击按钮会对当前侦进行截图，并绘制在canvas中 document.getElementById("pressme").onclick = function(e) { ctx.drawImage(imageElement, 0, 0, 360, 240); } </script> </body></html>例子：用canvas显示视频并在上面绘图
<!DOCTYPE HTML><html> <head> <title>Example</title> <style> canvas {border: thin solid black} body > * {float:left;} </style> </head> <body> <!--隐藏视频--> <video id="vid" hidden src="timessquare.webm" preload="auto" width="360" height="240" autoplay></video> <canvas id="canvas" width="360" height="240"> Your browser doesn't support the <code>canvas</code> element </canvas> <script> var ctx = document.getElementById("canvas").getContext("2d"); var imageElement = document.getElementById("vid"); var width = 100; var height = 10; ctx.lineWidth = 5; ctx.strokeStyle = "red"; //添加计时器，对图像进行截图，并使用canvas进行绘制 setInterval(function() { ctx.drawImage(imageElement, 0, 0, 360, 240); ctx.strokeRect(180 - (width/2),120 - (height/2), width, height); }, 25); //添加计时器，改变绘制图像的属性 setInterval(function() { width = (width + 1) % 200; height = (height + 3) % 200; }, 100); </script> </body></html>例子：将画布作为drawImage方法的来源
<!DOCTYPE HTML><html> <head> <title>Example</title> <style> canvas {border: thin solid black} body > * {float:left;} </style> </head> <body> <video id="vid" hidden src="timessquare.webm" preload="auto" width="360" height="240" autoplay></video> <canvas id="canvas" width="360" height="240"> Your browser doesn't support the <code>canvas</code> element </canvas> <div> <button id="pressme">Press Me</button> </div> <canvas id="canvas2" width="360" height="240"> Your browser doesn't support the <code>canvas</code> element </canvas> <script> var srcCanvasElement = document.getElementById("canvas"); var ctx = srcCanvasElement.getContext("2d"); var ctx2= document.getElementById("canvas2").getContext("2d"); var imageElement = document.getElementById("vid"); document.getElementById("pressme").onclick = takeSnapshot; var width = 100; var height = 10; ctx.lineWidth = 5; ctx.strokeStyle = "red"; ctx2.lineWidth = 30; ctx2.strokeStyle = "black;" setInterval(function() { ctx.drawImage(imageElement, 0, 0, 360, 240); ctx.strokeRect(180 - (width/2),120 - (height/2), width, height); }, 25); setInterval(function() { width = (width + 1) % 200; height = (height + 3) % 200; }, 100); //当按钮被按下时，我把代表原canvas的HTMLCanvasElement对象作为第一个参数， //用于调用第二个canvas上下文对象上的drawlmage方法 function takeSnapshot() { ctx2.drawImage(srcCanvasElement, 0, 0, 360, 240); ctx2.strokeRect(0, 0, 360, 240); } </script> </body></html>阅读全文
0 0
- HTML5权威指南笔记：35-使用canvas元素（1）
- HTML5权威指南笔记：36-使用canvas元素（2）
- HTML5权威指南笔记：11-表格元素
- HTML5权威指南笔记：34-使用多媒体
- HTML5权威指南笔记：13-定制input元素
- HTML5权威指南笔记（一）
- html5权威指南 学习笔记(1) 之 新增的主体结构元素
- html5+css3 权威指南阅读笔记（三）---表单及其他新增和改良元素
- html5权威指南1
- HTML5权威指南笔记：19-使用边框和背景
- HTML5权威指南笔记：20-使用盒模型
- 《HTML5与CSS3权威指南》学习笔记1
- HTML5+CSS3权威指南学习笔记（2-4章）
- HTML5权威指南笔记：16-理解CSS（内容简介）
- html５中canvas元素使用
- html5 canvas元素使用(一)
- HTML5权威指南笔记：14-其他表单元素及输入验证
- 《HTML5权威指南》之使用CSS选择器(1)
- LDR指令和LDR伪指令区别
- PHP jpgraph库的配置及生成统计图表:折线图、柱状图、饼状图等
- EventBus 源码分析
- LockSupport
- Verilog学习笔记--时延
- HTML5权威指南笔记：35-使用canvas元素（1）
- 记录学习过程中碰到的json对象数组字符串转成list方法
- 无人驾驶汽车系统入门（四）——反馈控制入门，PID控制
- 使用expdp和impdp远程导入导出库
- 程序员必备的600个英语词汇合集（2）
- C++设计模式——一个基于C++11的万用单例模板类
- 一个简单的基于注解的controller
- 文章标题
- 模拟+乱搞——我有特殊的懵题技巧
