h5 canvas学习笔记

最新推荐文章于 2024-11-08 08:52:41 发布
原创 最新推荐文章于 2024-11-08 08:52:41 发布 · 3.5k 阅读 · 1 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
收录于
随笔

当前文章被收录于：

随笔
11 篇文章 2 人学习
订阅专栏 查看详情
这篇博客详细介绍了如何使用HTML5的Canvas元素进行画布操作，包括创建画布、获取画笔、画图步骤、样式设置及接口的使用，并通过一个模拟时钟的实例展示了Canvas的实践应用。

创建画布：

    <canvas id="myCanvas" width="600px" height="530px">
        你的浏览器不支持canvas
    </canvas>
以上代码为在html文件里面添加一个canvas标签（若浏览器不支持此属性则会显示“你的浏览器不支持canvas”），除了width和height属性外，其还支持h5的标准属性，但是，canvas不是块级元素，在设置其居中的时候，要么外层包一个div，要么设置body的text-align为center。

获取画笔：

    var canvas = document.getElementById('myCanvas');
    var ctx = canvas.getContext('2d');
其中canvas是画布元素，ctx可以简单的理解为画笔。canvas本身是一块画布，没有画图能力，需要使用js来画图。

画图步骤：

  1. 保存当前的画图状态（save()函数）
  2. 设置画笔属性
  3. 勾勒或者填充
  4. 切换回保存的画图状态（restore()）
其中，第一步和第四步是需要配对使用的，它的意思是在画一个新的组件之前，将此时的画笔设置状态保存，在组件画完之后，恢复画笔状态，去除重复设置的
繁琐以及减少代码量和冗余。

样式设置：

ctx.fillStyle // 填充的颜色样式，值为十六进制表示或者其他的颜色表达式
ctx.strokeStyle // 勾勒的颜色样式，值同上
ctx.globalAlpha // 透明度样式，值为数字
ctx.lineWidth // 线条的宽度，单位是像素
ctx.lneCap // 线条的端点样式，值为butt/round/square，分别对应无端点、圆形端点、正方形端点
ctx.lineJoin // 两条直线的交汇处的拐角形状，值为miter/round/bevel，分别对应端点的尖角、圆角、斜角。

接口：

    // 绘制矩形、实心矩形
    ctx.strokeRect(x0, y0, width, height);
    ctx.fillRect(x0, y0, width, height);

    // 开始勾勒路径和结束勾勒路径
    ctx.beginPath();
    ctx.closePath();

    // 根据路径画图或者填充整个路径围起来的区域
    ctx.fill();
    ctx.stroke();

    // 绘制直线
    ctx.moveTo(startX, startY);
    ctx.lineTo(endX, endY);

    // 勾勒圆形路径
    // 参数：圆心坐标，半径，开始角度，结束角度，顺时针
    // 切记：顺时针为正角，与数学逆时针为正角有所不同
    ctx.arc(x0, y0, radius, startAngel, endAngel, Counterclockwise);

    // 绘制曲线
    // 参数：开始端点坐标，结束端点坐标
    ctx.arcTo(x1, y1, x2, y2, radius);

    // 颜色渐变
    // 参数：两个变化端点的坐标
    var obj = ctx.createLinearGradient(x1, y1, x2, y2);
    // 为渐变设置渐变色
    // 参数：距离起点的偏移量（范围0-1），颜色值
    obj.addColorStop(offset, color);

    // 平移
    // 参数：相对于原坐标的平移大小
    ctx.translate(x, y);
    // 缩放
    // 参数：相对于原坐标的缩放比
    ctx.scale(x, y);
    // 旋转
    // 旋转的角度，单位为°
    // 是以坐标原点为中心的旋转，如果需要以某点为中心旋转
    // 可使用translate()将坐标原点平移到该点位置，旋转后在平移回来
    ctx.rotate(x);

canvas的函数接口远远不止这些 戳这里了解更多

实例：

此实例为极客学院出品的《HTML5+CSS3web前端开发技术》里面一个模拟时钟的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>clock</title>
    <script type="text/javascript">
        function init(argument) {
            clock();
            setInterval(clock, 1000);
        }
        function clock() {
            var now = new Date();
            var sec = now.getSeconds();
            var min = now.getMinutes();
            var hr = now.getHours();
            hr = hr >= 12 ? hr - 12 : hr;

            var ctx = document.getElementById('canvas').getContext('2d');
            ctx.save();
            ctx.clearRect(0, 0, 150, 150);
            ctx.translate(75, 75);
            ctx.scale(0.4, 0.4);
            ctx.rotate(-Math.PI / 2);
            ctx.strokeStyle = "black";
            ctx.fillStyle = "white";
            ctx.lineCap = "round";
            ctx.beginPath();
            ctx.lineWidth = 10;
            ctx.strokeStyle = '#325FA2';
            ctx.arc(0, 0, 142, 0, Math.PI * 2, true);
            ctx.stroke();

            ctx.save();
            for (var i = 0; i < 12; i++) {
                ctx.beginPath();
                ctx.rotate(Math.PI / 6);
                ctx.moveTo(100, 0);
                ctx.lineTo(120, 0);
                ctx.stroke();
            }
            ctx.restore();

            ctx.save();
            ctx.lineWidth = 5;
            for (var i = 0; i < 60; i++) {
                if (i % 5 != 0) {
                    ctx.beginPath();
                    ctx.moveTo(117, 0);
                    ctx.lineTo(120, 0);
                    ctx.stroke();
                }
                ctx.rotate(Math.PI / 30);
            }
            ctx.restore();
            ctx.fillStyle = "black";
            ctx.save();

            ctx.rotate(hr * (Math.PI / 6) + (Math.PI / 360) * min + (Math.PI / 21600) * sec);
            ctx.lineWidth = 14;
            ctx.beginPath();
            ctx.moveTo(-20, 0);
            ctx.lineTo(80, 0);
            ctx.stroke();
            ctx.restore();
            ctx.save();

            ctx.rotate((Math.PI / 30) * min + (Math.PI / 1800) * sec);
            ctx.lineWidth = 10;
            ctx.beginPath();
            ctx.moveTo(-28, 0);
            ctx.lineTo(112, 0);
            ctx.stroke();
            ctx.restore();
            ctx.save();

            ctx.rotate((Math.PI / 30) * sec);
            ctx.strokeStyle = "#D40000";
            ctx.fillStyle = "D40000";
            ctx.lineWidth = 6;
            ctx.beginPath();
            ctx.moveTo(-30, 0);
            ctx.lineTo(83, 0);
            ctx.stroke();
            ctx.beginPath();
            ctx.arc(0, 0, 10, 0, Math.PI * 2, true);
            ctx.fill();
            ctx.beginPath();
            ctx.arc(95, 0, 10, 0, Math.PI * 2, true);
            ctx.stroke();
            ctx.fillStyle = "rgba(0, 0, 0, 0)";
            ctx.arc(0, 0, 3, 0, Math.PI * 2, true);
            ctx.fill();
            ctx.restore();
            ctx.restore();
        }
    </script>
    <style type="text/css">
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body onload="init();">
    <canvas id="canvas" width="150px" height="150px">
        你的浏览器不支持Canvas
    </canvas>
</body>
</html>
此外，我自己也动手做了一个canvas的小游戏，初期版本很粗糙，移动端某些浏览器可能无法兼容，有时间再去完善，有兴趣的朋友可以 戳这里玩玩。

标签
#canvas #学习笔记 #动画 #游戏
【H5核心Canvas游戏制作视角学习笔记其一】初识canvas
weixin_45602529的博客
03-24 4219
系列文章目录 提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加 例如：第一章 Python 机器学习入门之pandas的使用 提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录 系列文章目录 前言 一、pandas是什么？ 二、使用步骤 1.引入库 2.读入数据 总结 前言 制作一款当代的基于web的文字图形类游戏或者其他web应用，自然是绕不开canvas这个充满活力的标签。本文就来讲述笔者在学习道路上的心得...
H5 canvas学习笔记 | 基本使用 路径 状态
好好学习天天向上
07-20 361
HTML有两个主要的2D图形技术:Canvas和SVGcanvassvg2D2D基于JavaScript动态生成使用XML静态描述不会保留绘制的图形的信息，基于像素点绘制位图，放大会会失真内存中保留绘制的图形的信息，用html标签描绘形状，矢量图放大不会失真canvas无法对已经绘制的图像进行修改、操作如果发生修改，需要重绘svg中每个图形又对应真实的dom节点、svg可以获取到标签进行操作H5 Canvas就是使用JavaScript来操作Canvas元素(画布)的技术。①获取。
Canvas学习笔记
weixin_44646986的博客
05-28 340
一，基础 假设html为 <style> #canvas { background-color: #444; } </style> <body> <canvas id="canvas"></canvas> </body> 下面的例子都是基于这个的 1，设置画布宽高 画布默认的宽高为300 * 150，我们...
canvas基础简单易懂教程（完结，多图）
热门推荐
qq_45562973的博客
04-14 1万+
Python微信订餐小程序课程视频 https://blog.csdn.net/m0_56069948/article/details/122285951 Python实战量化交易理财系统 https://blog.csdn.net/m0_56069948/article/details/122285941 目录* Canvas学习 + 一、 Canvas概述 - 1.1 Hello world - 1.2 Canvas的像素化 - 1.3 Canvas的动画思想 - 1.4 面向对象思维实现canvas动
Canvas系统学习 - 全面教程
最新发布
YunWisdom
11-08 6420
什么是 CanvasCanvas 的应用场景在浏览器中使用 Canvas 的方法1. 什么是 CanvasCanvas 呢，就像是一块可以在网页上画画的神奇 “画布”。它是 HTML5 中新增的一个元素，可以通过 JavaScript 来在上面绘制各种图形、图像和动画。它可以让网页变得更加生动有趣，不再只是单调的文字和图片。简单来说，Canvas 提供了一种在网页上进行图形绘制的强大工具，让开发者能够自由地创造各种视觉效果。2. Canvas 的应用场景。
【HTML】【一文全解Canvas】从初学到实战，彻底掌握前端绘图神器！
weixin_55846296的博客
06-09 1万+
前言一、Canvas 概述二、在 HTML 中使用 Canvas三、Canvas 绘制图形1、绘制矩形2、绘制圆形a. 绘制实心圆形b. 绘制空心圆形四、Canvas 绘制文本五、Canvas 绘制图片六、Canvas 动画效果1、setInterval() 实现动画2、requestAnimationFrame() 实现动画七、Canvas 使用注意事项八、利用Canvas绘制挂钟（原理-绘制弧形）- 简单练习1、 还原坐标系2、 绘制背景3、 绘制时钟指针4、循环绘制。
H5学习笔记（三）--canvas绘制矩形、路径、曲线和变换
qq_44753552的博客
09-14 1646
目录1、绘制矩形笔记：实例2、绘制路径笔记：实例3、绘制曲线canvas绘制圆形canvas绘制圆弧二次贝塞尔三次贝塞尔 1、绘制矩形 笔记： HTML中的元素canvas只支持一种原生的图形绘制：矩形。所有其他 的图形的绘制都至少需要生成一条路径 1.绘制矩形 canvas提供了三种方法绘制矩形： ---->绘制一个填充的矩形（填充色默认为黑色） fillRect(x, y, width, height) ---->绘制一个矩形的边框（默认边框为:一像素实心黑色）
h5 canvas总结 学习笔记
weixin_43606967的博客
05-29 397
canvas用到的api整理，方便自己复习，理解不一定全对(ー`´ー)
【学习笔记】H5-canvas
m0_54970415的博客
05-30 686
文章目录一、canvas标签使用方法二、准备画笔三、能画什么？1. 矩形a.实心矩形b.空心矩形c.透明矩形（异形矩形、清空）2. 路径 (万能方法，可以画任意的形状)<1> 直线<2> 三角形<3> 路径矩形<4> 圆或圆弧四、描边、填充、边框粗细等（上色）1. 填充颜色2. 描边颜色3. 边框粗细4. 描边(只对路径有用)5. 填充(只对路径有用) 一、canvas标签使用方法 canvas是一个双标签，默认width300，height150。设置画布大
h5学习笔记之canvas绘图2
qq_39773416的博客
09-06 395
一、颜色渐变 添加颜色渐变的方法 addColorStop(位置,颜色) 位置:渐变点 0-1之间 可多个 1、线性渐变:createLinearGradient(x1,y1,x2,y2) x1,y1起始坐标点 x2,y2结束坐标点 var can = document.getElementByid('can'); var ...
h5学习笔记之canvas绘制钟表
qq_39773416的博客
08-30 259
一、先理解canvas变换 translate(x,y) 坐标基准点偏移 : 把画布的中心点移动到 xy这个点上 rotate(弧度): 旋转 弧度公式 ：角度*PI/180 scale(wb,hb) 缩放比例，值是当前内容的几倍大小 二、时钟1 <!doctype html> <html lang="en"> <head> &lt...
h5学习笔记之canvas（3）
qq_39773416的博客
09-02 234
一、像素 createImageData(sx,sy) 创建新的、空白的 ImageData 对象 getImageData(x1,y1,sx,sy) 返回 ImageData 对象，该对象为画布上指定的矩形复制像素数据 putImageData(img,x2,y2) 把图像数据（从指定的 ImageData 对象）放回画布上 具体用法： 如1： var can = documen...
h5学习笔记之canvas绘图（1）
qq_39773416的博客
08-27 429
一、canvas标签的说明 在设置cancas大小的时候，必须在标签内写，如果在css内写会发生变化 默认宽度300px，默认高度 150px 背景颜色红色 的一个长方形 <canvas width="" height="" id=""> 您的浏览器不支持canvas，请更换浏览器！ </canvas> 二、成功使用canvas绘图的前提 需要2d渲...
H5 canvas学习笔记
weixin_44855888的博客
05-10 155
直接推荐三个内容很顶的网页： 1.MDN中的官方api： 官方api： 2.博客园中一个很全的笔记: 笔记 3.一个不错的例子： 例子
H5学习笔记（七）--canvas总结
qq_44753552的博客
09-14 205
1.注意点 ---canvas图像的渲染有别于html图像的渲染， canvas的渲染极快，不会出现代码覆盖后延迟渲染的问题 写canvas代码一定要具有同步思想 ---在获取上下文时，一定要先判断 ---画布高宽的问题 画布默认高宽300*150 切记一定要使用html的attribute的形式来定义画布的宽高 通过css形式定义会缩放画布内的图像 ---绘制矩形的问题 a.边框宽度的问题，边框宽度是在偏移量上下分别渲染一半，可能会出现小数边框， 一旦出现小数边框
H5 html5学习笔记之Canvas（一）
小菜鸡程序媛的挣扎史
10-21 641
目录 将 HTML5 元素定义为块元素 为 HTML 添加新元素 Internet Explorer 浏览器问题 HTML5 新元素 新多媒体元素 新表单元素 新的语义和结构元素 已移除的元素 HTML5 Canvas 什么是 canvas? 创建一个画布（Canvas） 使用 JavaScript 来绘制图像 Canvas 坐标 Canvas - 路径 Can...
H5学习笔记4：HTML5的Canvas
weixin_42583552的博客
10-17 168
详细
H5学习笔记（二）--canvas基本用法
qq_44753552的博客
09-14 398
1、canvas基本用法概述 1.什么是canvas(画布) <canvas> 是 HTML5 新增的元素，可用于通过使用JavaScript中的脚本来绘制图形 例如，它可以用于绘制图形，创建动画。<canvas> 最早由Apple引入WebKit 我们可以使用<canvas>标签来定义一个canvas元素 ----->使用<canvas>标签时，建议要成对出现，不要使用闭合的形式。 ----->canvas元素默认具有高宽
H5学习笔记（四）--canvas钟表实例
qq_44753552的博客
09-14 202
在画布上制作一个钟表，显示当前时间。 代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } html, body { height: 100%; overflow: hidden;
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值