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

最新推荐文章于 2021-06-19 06:28:54 发布
最新推荐文章于 2021-06-19 06:28:54 发布
阅读量417 收藏
点赞数
分类专栏： HTML5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011069189/article/details/78458322
版权

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>
馋雪山丘
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html5 canvas element
Hello World ~
05-31 1205
标签定义图形，比如图表和其他图像。只有两个属性--width和height（初始化width:300px;height:150px;） 标签只是图形的容器，必须通过脚本来描述。 通过多种方法使用Canvas回执路径、盒、圆、字符以及添加图像 有两种方式设置样式 一：通过style 二：通过JavaScript CanvasRenderingContext2D接口提供的2D渲染上下文
canvas-text-editor-tutorial:使用html5 canvas的简单文本编辑器
05-25
我将尝试通过创建一系列教程来解决此问题，以说明文本编辑器的所有重要方面，同时使用HTML5 canvas和许多JavaScript代码创建可用的应用程序。 以下是按优先级排列的编辑器功能要求列表： 键盘光标导航和选择； ...
canva 图片提取_Canva教程：15分钟内创建一个平滑的信息图
culi3118的博客
08-22 1259
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绘制两个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 369
1 用路径绘图基本路径方法： 名称 说明 返回 beginPath() 开始一条新路径 void closePath() 尝试闭合现有路径，方法是绘制一条线，连接最后那条线的终点与初始坐标 void fill() 填充用子路径描述的图形 void isPointlnPath(x, y) 如果指定的点在当前路径所描述的图形之内则返回true 布
HTML5权威指南读书笔记24（第35、36章）--使用canvas元素
weixin_43745804的博客
11-29 100
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权威指南读书笔记,[读书笔记]Javascript权威指南：客户端Javascript知识概要总结...
weixin_29722783的博客
06-19 108
学习如何在web浏览器中使用javascript。1.如何让javascript在web浏览器中运行起来。2.web浏览器端将本技术，客户端javascript中的重要全局函数。3.通过脚本来操纵HTML文档内容(如何选取特定的HTML元素，如何给HTML元素设置属性，如何修改元素内容，以及如何给文档添加新节点)Demofunction debug(msg){var log= document.g...
HTML5权威指南 笔记
REDJOLER的博客
07-17 260
第三章 acceesskey属性 作用：accesskey可以设定一个或几个用来选择页面上的元素的快捷键 例： <input type=“text” name=“name” accesskey=“n“/> 为input设置accesskey属性，windows系统上，同时按下alt+n，就可以选择到这个input contenteditable属性 作用：值为true时，内容可编辑，flase时不可编辑。如果未设定，则会从父元素进行继承 例： <p contenteditable
HTML5权威指南----读书笔记
weixin_30718391的博客
08-20 89
<!DOCTYPE html> <html> <head> <meta name = 'keywords' content="HTML5权威指南----读书笔记"> <meta name = 'description' content="HTML5权威指南----读书笔记"> <meta cha...
HTML5和CSS3权威指南-读书笔记（H5部分）
qq_34109078的博客
05-19 1759
接到了银联的面试通知，在慌忙准备面试的过程中感觉到，H5和CSS3是前端面试的重点考察对象，这段时间一直在恶补前端基础知识，css.html方面的书也看了好几本，这本书看完有段时间了，今天来总结一下，这样才能在脑子里留下东西。一. H5与H4的区别1. H5要解决的三个问题1.web浏览器之间的兼容性低 2.文档结构不够明确 3.web应用程序的功能受到了限制2. H5和H4的区别1.DOCTY
analog-stopwatch:使用 HTML5 Canvas 创建
07-13
1. **初始化Canvas**：首先，我们需要获取Canvas元素并创建2D渲染上下文，通过`document.getElementById('canvas').getContext('2d')`实现。这个2D渲染上下文是我们进行绘图操作的对象。 2. **定义秒表的结构**：...
panvasjs:PanvasJS-JavaScript canvas的框架
05-04
SQRT1_2-1 /2的平方根 LN2-2的自然对数 LN10-10的自然对数 LOG2E -e的以2为底的对数 LOG10E -e的以10为底的对数 frameCount-包含自循环开始运行以来经过的帧数 frameRate-包含当前每秒的帧数 的mousePressed -等于...
node-canvas-webgl:node-canvas 和 headless-gl 的集成
07-23
节点画布-webgl 和集成。演示：与三个js const fs = require ( 'fs' ) ;const THREE = require ( 'three' ) ;const GIFEncoder = require ( 'gifencoder' ) ;...const canvas = createCanvas ( width , height ) ;con
canvas-experiments:使用 Html5 Canvas 元素的一些 oldscool 图形效果
06-03
这些是使用我目前正在试验的 Html5 Canvas 元素的一些图形效果。 在查看它的实际效果。 我还在这里写了一篇关于这个实验的文章： : 执照 根据 Apache 许可证 2.0 版（“许可证”）获得许可； 除非遵守许可，否则...
HTML5权威指南笔记：34-使用多媒体
u011069189的博客
11-02 805
1 使用video元素video元素可以在网页里嵌入视频内容。 video元素 元素类型 流/短语 允许具有的父元素 任何能包含流或短语元素的元素 局部属性 autoplay 、preload 、controls 、loop 、poster 、height、width 、muted 、src 内容 source和track元素，以及短语和流内容 标签用法
HTML5权威指南笔记：15-嵌入内容
u011069189的博客
10-26 515
1 嵌入图像img元素允许我们在HTML文档里嵌入图像 img元素 元素类型 短语元素 允许具有的父元素 任何可能包含短语内容的元素 局部属性 src 、alt 、height 、width 、usemap 、ismap 内容 无 标签用法 虚元素形式 是否为HTML5新增 否 在HTML5中的变化 border 、longdesc 、
HTML5权威指南笔记：10-文档分节
u011069189的博客
10-24 486
1 添加基本的标题（h1元素） h1 ~ h6元素 元素类型 流 允许具有的父元素 hgroup元素或其他任何可以包含流元素的元素。这些元素不能是address元素的后代元素 局部属性 无 内容 流内容 标签用法 开始标签和结束标签 是否为HTML5新增 否 在HTML5中的变化 无 习
HTML5权威指南笔记：7-创建HTML文档
u011069189的博客
10-23 478
1-构筑基本的文档结构1.1 DOCTYPE元素 DOCTYPE元素 元素类型 无 允许具有的父元素 无 局部属性 无 内容 无 标签用法 单个开始标签 是否为HTML5新增 否 在HTML5中的变化 HTML4中要求要有的DTD 已不再使用 习惯样式 无 <!--这个元素告诉浏览器两件事情： 第一， 它处理的是HTML文档；第
HTML5 Canvas权威指南：图形、动画与游戏开发实践
《HTML5 Canvas核心技术：图形、动画与游戏开发》这本书由David Geary撰写，是HTML5 Canvas领域的权威之作，详细阐述了Canvas的各种API和实际应用。 书中首先介绍了Canvas的基本概念，包括如何在HTML文档中引入...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值