HTML5权威指南笔记：35-使用canvas元素（1）

最新推荐文章于 2021-06-19 06:28:54 发布
原创 最新推荐文章于 2021-06-19 06:28:54 发布 · 544 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍HTML5 Canvas的基本用法，包括如何获取画布上下文、绘制基本图形、设置绘制状态、使用渐变及图案填充、保存和恢复状态等。此外还展示了如何在画布上绘制图像和视频帧。

1 开始使用canvas 元素

canvas元素
元素类型短语／流
允许具有的父元素任何能包含短语或流元素的元素
局部属性height 、width
内容短语或流内容
标签用法开始和结束标签
是否为HTML5新增是
在HTML5中的变化此处不适用
习惯样式无

例子：

<!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对象：

成员说明返回
height对应于height属性数值
width对应于width属性数值
getContext(<context>)为画布返回绘图上下文对象

例子：为画布获取二维上下文对象

<!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 绘制矩形

简单的图形方法：

成员说明返回
clearRect(x, y, w, h)清除指定的矩形void
fillRect(x, y, w, h)绘制一个实心矩形void
strokeRect(x, y, w, h)绘制一个空心矩形void

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 设置画布绘制状态

基本的绘制状态属性：

成员说明默认值
fillStyle获取或设置用于实心图形的样式black
lineJoin获取或设置线条与图形连接时的样式miter
lineWidth获取或设置线条的宽度1.0
strokeStyle获取或设置用于线条的样式black

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 使用渐变

渐变方法：

名称说明返回
createlinearGradient(xo, yo, x1, y1)创建线性渐变CanvasGradient
createRadialGradient(xo, yo, ro, x1, y1, rl)创建径向渐变CanvasGradient

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 保存和恢复绘制状态

使用下面的方法保存和恢复绘制状态

  1. save()：保存绘制状态屈性的值，并把它们推入状态栈
  2. 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方法在画布上绘制图像

  1. 这个方法需要三个、五个或九个参数。
  2. 第一个参数始终是图像的来源，它可以是代表img 、video或其他canvas元素的DOM对象。
  3. 使用三个参数时，第二个和第三个参数给出了图像应当在画布上绘制的坐标。
  4. 使用五个参数时，额外的参数指定了应当给图像绘制的宽度和高度，以代替原始尺寸。
  5. 使用九个参数时：第二个和第三个参数是在源图像内的偏移量；第四个和第五个参数是源图像所需使用区域的宽度和高度；第六个和第七个参数指定了所选区域的左上角将要在画布上绘制的坐标；第八个和第九个参数指定了所选区域将要绘制的宽度和高度。

例子：对视频进行截图

<!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>
前端实践：HTML5项目开发经验分享
AI架构全栈开发实战笔记
05-18 620
本文旨在分享HTML5项目开发的实际经验，涵盖从项目规划到部署上线的全流程。重点介绍HTML5在现代Web开发中的应用场景、技术选型、开发技巧和性能优化方法。文章首先介绍HTML5的核心概念和特性，然后深入探讨开发流程、性能优化和跨平台适配等关键问题。最后通过实际案例展示HTML5项目开发的最佳实践。HTML5：第五代超文本标记语言，包含语义化标签、多媒体支持、本地存储等新特性Canvas：HTML5提供的绘图API，支持动态生成图形和动画。
canva 图片提取_Canva教程：15分钟内创建一个平滑的信息图
culi3118的博客
08-22 1854
canva 图片提取With a whopping 800% increase in search traffic for the word “infographic” between 2010-2012, it is no surprise that infographics are a hot ticket item in 2015. Online applications like Pikt...
html5 canvas element
Hello World ~
05-31 1362
标签定义图形，比如图表和其他图像。只有两个属性--width和height（初始化width:300px;height:150px;） 标签只是图形的容器，必须通过脚本来描述。 通过多种方法使用Canvas回执路径、盒、圆、字符以及添加图像 有两种方式设置样式 一：通过style 二：通过JavaScript CanvasRenderingContext2D接口提供的2D渲染上下文
【坑】html5中使用canvas绘制两个strokeRect之间忘了用beginPath()
热门推荐
Slience
08-11 1万+
代码 canvas { border: thin solid black; } var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); context.beginPath(); co
HTML5权威指南笔记：36-使用canvas元素（2）
u011069189的博客
11-06 448
1 用路径绘图基本路径方法： 名称 说明 返回 beginPath() 开始一条新路径 void closePath() 尝试闭合现有路径，方法是绘制一条线，连接最后那条线的终点与初始坐标 void fill() 填充用子路径描述的图形 void isPointlnPath(x, y) 如果指定的点在当前路径所描述的图形之内则返回true 布
HTML5权威指南读书笔记24（第35、36章）--使用canvas元素
weixin_43745804的博客
11-29 159
1、概述 2、开始使用canvas元素 3、获取画布上下文对象（getContext（）） <head> <style type="text/css"> canvas{border:1px double gray} </style> </head> <body> <canvas id="canvas" width="500" height="200" > your brow
HTML5权威指南 笔记
REDJOLER的博客
07-17 351
第三章 acceesskey属性 作用：accesskey可以设定一个或几个用来选择页面上的元素的快捷键 例： <input type=“text” name=“name” accesskey=“n“/> 为input设置accesskey属性，windows系统上，同时按下alt+n，就可以选择到这个input contenteditable属性 作用：值为true时，内容可编辑，flase时不可编辑。如果未设定，则会从父元素进行继承 例： <p contenteditable
HTML5权威指南读书笔记,[读书笔记]Javascript权威指南：客户端Javascript知识概要总结...
weixin_29722783的博客
06-19 184
学习如何在web浏览器中使用javascript。1.如何让javascript在web浏览器中运行起来。2.web浏览器端将本技术，客户端javascript中的重要全局函数。3.通过脚本来操纵HTML文档内容(如何选取特定的HTML元素，如何给HTML元素设置属性，如何修改元素内容，以及如何给文档添加新节点)Demofunction debug(msg){var log= document.g...
HTML5权威指南----读书笔记
weixin_30718391的博客
08-20 129
<!DOCTYPE html> <html> <head> <meta name = 'keywords' content="HTML5权威指南----读书笔记"> <meta name = 'description' content="HTML5权威指南----读书笔记"> <meta cha...
HTML5和CSS3权威指南-读书笔记（H5部分）
qq_34109078的博客
05-19 1865
接到了银联的面试通知，在慌忙准备面试的过程中感觉到，H5和CSS3是前端面试的重点考察对象，这段时间一直在恶补前端基础知识，css.html方面的书也看了好几本，这本书看完有段时间了，今天来总结一下，这样才能在脑子里留下东西。一. H5与H4的区别1. H5要解决的三个问题1.web浏览器之间的兼容性低 2.文档结构不够明确 3.web应用程序的功能受到了限制2. H5和H4的区别1.DOCTY
HTML5权威指南 阅读计划-叶糖糖1
08-03
《HTML5权威指南》是一本全面且深入介绍HTML5、CSS和JavaScript的书籍，适合初级到中级前端工程师阅读。本书的特色在于系统性地涵盖了HTML5的各项新特性，包括标记文字、文档分节、表格元素、表单以及自定义input...
小白的《HTML5权威指南》笔记（第一部分）
canxuezhang的博客
10-15 458
粗涉
掌握HTML5与CSS3：权威指南第3版精要
资源摘要信息: "htmland css.zip" 是一个包含了HTML5和CSS3学习资料的压缩包文件，具体的文件名为 "HTML5与CSS3权威指南第3版.pdf" 和 "新建文本文档.txt"。根据文件名，我们可以推断出以下知识点： 1. HTML5 是第 ...
html5权威指南下载
07-20
《HTML5权威指南》是一本经典的HTML5学习与开发指南，对于学习和掌握HTML5的开发技术非常有帮助。这本书系统地介绍了HTML5的各个方面，包括HTML文档结构、新的语义化标签、多媒体元素、Canvas绘图、地理定位、离线...
HTML5权威指南笔记：34-使用多媒体
u011069189的博客
11-02 988
1 使用video元素video元素可以在网页里嵌入视频内容。 video元素 元素类型 流/短语 允许具有的父元素 任何能包含流或短语元素的元素 局部属性 autoplay 、preload 、controls 、loop 、poster 、height、width 、muted 、src 内容 source和track元素，以及短语和流内容 标签用法
HTML5权威指南笔记：11-表格元素
u011069189的博客
10-24 703
1 生成基本的表格 table元素 元素类型 流 允许具有的父元素 任何可以包含流元素的元素 局部属性 border 内容 caption 、colgroup 、thead 、tbody 、tfoot 、tr 、th和td元素 标签用法 开始标签和结束标签 是否为HTML5新增 否 在HTML5中的变化 summary 、align 、
HTML5权威指南笔记：15-嵌入内容
u011069189的博客
10-26 606
1 嵌入图像img元素允许我们在HTML文档里嵌入图像 img元素 元素类型 短语元素 允许具有的父元素 任何可能包含短语内容的元素 局部属性 src 、alt 、height 、width 、usemap 、ismap 内容 无 标签用法 虚元素形式 是否为HTML5新增 否 在HTML5中的变化 border 、longdesc 、
HTML5权威指南笔记：10-文档分节
u011069189的博客
10-24 553
1 添加基本的标题（h1元素） h1 ~ h6元素 元素类型 流 允许具有的父元素 hgroup元素或其他任何可以包含流元素的元素。这些元素不能是address元素的后代元素 局部属性 无 内容 流内容 标签用法 开始标签和结束标签 是否为HTML5新增 否 在HTML5中的变化 无 习
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值