Canvas学习参考文档

最新推荐文章于 2024-06-21 11:18:05 发布
最新推荐文章于 2024-06-21 11:18:05 发布
阅读量6.2k 收藏 34
点赞数 10
分类专栏： # web中间件 文章标签： canvas html js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45525272/article/details/113527524
版权

文章目录

Canvas初识

什么是Canvas？

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。
画布是一个矩形区域，您可以控制其每一像素。
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

创建Canvas元素

向 HTML5 页面添加 canvas 元素。
规定元素的 id、宽度和高度：

    <canvas id="myCanvas" width="200" height="100"></canvas>

Canvas坐标系

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-axGxgAIc-1612178234725)(images/location.jpg)]

通过JavaScript来绘制

    /*获取元素*/
    var myCanvas = document.querySelector('#myCanvas');
    /*获取绘图工具*/
    var context = myCanvas.getContext('2d');
    /*设置绘图的起始位置*/
    context.moveTo(100,100);
    /*绘制路径*/
    context.lineTo(200,200);
    /*描边*/
    context.stroke();

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas {
    
            border: 1px solid #ccc;
            /*不建议在 css样式设置尺寸 这里只是样式多大  是对画布的拉伸   实际画布还是初始值那么大*/
            /*width: 600px;
            height: 400px;*/
        }
    </style>
</head>
<body>
<!--1.准备画布-->
<!--1.1 画布是白色的 而且默认300*150-->
<!--1.2 设置画布的大小  width="600" height="400" -->
<canvas width="600" height="400" ></canvas>
<!--2.准备绘制工具-->
<!--3.利用工具绘图-->
<script>
    /*1.获取元素*/
    var myCanvas = document.querySelector('canvas');
    /*2.获取上下文 绘制工具箱 */
    /*是否有3d 暂时没有*/
    var ctx = myCanvas.getContext('2d'); /*web gl 绘制3d效果的网页技术*/
    /*3.移动画笔*/
    ctx.moveTo(100,100);
    /*4.绘制直线 (轨迹，绘制路径)*/
    ctx.lineTo(200,100);
    /*5.描边*/
    ctx.stroke();
</script>
</body>
</html>

Canvas的基本使用

图形绘制

需要理解些概念：

  • 路径的概念

  • 路径的绘制

    • 描边 stroke()
    • 填充 fill()

  • 闭合路径

    • 手动闭合
    • 程序闭合 closePath()

  • 填充规则(非零环绕)
    在这里插入图片描述

  • 开启新的路径 beginPath()

设置样式

  • 画笔的状态
    • lineWidth 线宽，默认1px
    • lineCap 线末端类型：(butt默认)、round、square
    • lineJoin 相交线的拐点 miter(默认)、round、bevel
    • strokeStyle 线的颜色
    • fillStyle 填充颜色
    • setLineDash() 设置虚线
    • getLineDash() 获取虚线宽度集合
    • lineDashOffset 设置虚线偏移量（负值向右偏移）

画笔实例练习

渐变色绘制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas {
    
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
<canvas width="600" height="400"></canvas>
<script>
    var myCanvas = document.querySelector('canvas');
    var ctx = myCanvas.getContext('2d');

    /*线是由点构成的*/
    ctx.lineWidth = 30;
    for (var i = 0; i < 255; i++) {
    
        ctx.beginPath();
        ctx.moveTo(100+i-1,100);
        ctx.lineTo(100+i,100);
        ctx.strokeStyle = 'rgb('+i+',0,0)';
        ctx.stroke();
    }

</script>
</body>
</html>
镂空的房子
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas {
    
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
<canvas width="600" height="400"></canvas>
<script>
    var myCanvas = document.querySelector('canvas');
    var ctx = myCanvas.getContext('2d');

    /*1.绘制两个正方形 一大200一小100 套在一起*/
    ctx.moveTo(100,100);
    ctx.lineTo(300,100);
    ctx.lineTo(300,300);
    ctx.lineTo(100,300);
    ctx.closePath();

    ctx.moveTo(150,150);
    ctx.lineTo(150,250);
    ctx.lineTo(250,250);
    ctx.lineTo(250,150);
    ctx.closePath();

    /*2.去填充*/
    //ctx.stroke();
    ctx.fillStyle = 'red';
    ctx.fill();

    /*在填充的时候会遵循非零环绕规则*/
</script>
</body>
</html>
绘制坐标网格
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas {
    
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
<canvas width="600" height="400"></canvas>
<script>
    var myCanvas = document.querySelector('canvas');
    var ctx = myCanvas.getContext('2d');

    /*1.绘制网格*/
    /*2.网格的大小*/
    var gridSize = 10;
    var canvasHeight = ctx.canvas.height;
    var canvasWidth = ctx.canvas.width;
    /*3.画多少条X轴方向的线 横线的条数  画布高度/小格大小  */

    var xLineTotal = Math.floor(canvasHeight / gridSize);
    for (var i = 0; i <= xLineTotal; i++) {
    
        ctx.beginPath();
        ctx.moveTo(0, i * gridSize - 0.5 );
        ctx.lineTo(canvasWidth, i * gridSize - 0.5);
        ctx.strokeStyle = '#eee';
        ctx.stroke();
    }
    /*4.画多少条Y轴方向的线*/
    var yLineTotal = Math.floor(canvasWidth / gridSize);
    for (var i = 0; i <= yLineTotal; i++) {
    
        ctx.beginPath();
        ctx.moveTo(i*gridSize - 0.5 ,0);
        ctx.lineTo(i*gridSize - 0.5 ,canvasHeight);
        ctx.strokeStyle = '#eee';
        ctx.stroke();
    }
</script>
</body>
</html>
绘制坐标系

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas {
    
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
<canvas width="600" height="400"></canvas>
<script>
    var myCanvas = document.querySelector('canvas');
    var ctx = myCanvas.getContext('2d');

    /*1.绘制坐标系*/
    /*2.确定原点*/
    /*3.确定距离画布旁边的距离*/
    /*4.确定坐标轴的长度*/
    /*5.确定箭头的大小  是个等腰三角形  10 */
    /*6.绘制箭头填充*/

    // 坐标轴与底部的间隔
    var space = 20;
    // 箭头大小
    var arrowSize = 10; 

    /*计算原点 x0 y0*/
    var canvasWidth = ctx.canvas.width;
    var canvasHeight = ctx.canvas.height;
    var x0 = space;
    var y0 = canvasHeight - space;

    /*绘制x轴*/
    ctx.beginPath();
    ctx.moveTo(x0, y0);
    ctx.lineTo(canvasWidth - space, y0);
    /*箭头*/
    ctx.lineTo(canvasWidth - space - arrowSize, y0 + arrowSize / 2);
    ctx.lineTo(canvasWidth - space - arrowSize, y0 - arrowSize / 2);
    ctx.lineTo(canvasWidth - space, y0);
    ctx.fill();
    ctx.stroke();

    /*绘制y轴*/
    ctx.beginPath();
    ctx.moveTo(x0, y0);
    ctx.lineTo(space, space);
    /*箭头*/
    ctx.lineTo(space + arrowSize / 2, space + arrowSize);
    ctx.lineTo(space - arrowSize / 2, space + arrowSize);
    ctx.lineTo(space, space);
    ctx.fill();
    ctx.stroke();


</script>
</body>
</html>
绘制坐标点

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas {
    
            border: 1px solid #ccc;
        }
最低0.47元/天 解锁文章
呆萌宝儿姐
关注
  • 10
    点赞
  • 踩
  • 34
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 14
    评论
专栏目录
html5 canvas 文档,创建和发布HTML5 Canvas文档
weixin_39863371的博客
06-03 928
HTML5 Canvas 是什么？Canvas 是 HTML5 中的一个新元素，它提供了多个 API，可以让您动态生成及渲染图形、图表、图像及动画。HTML5 的 Canvas API 提供二维绘制能力，它的出现使得 HTML5 平台更为强大。如今的大多数操作系统和浏览器都支持这些功能。Canvas 本质上是一个位图渲染引擎，其最终结果是生成绘图，且绘图大小不可调整。另外，在 Canvas 上绘制...
HTML5 Canvas
05-09
HTML5 Canvas
Canvas Api(全)
Big_YiFeng的博客
05-30 3743
Canvas API ctx.moveTo(100,100) 参数 x 横坐标 y 竖坐标 作用 将画笔移动到坐标中的某个点 ctx.lineTo(100,100) 参数 x 横坐标 y 竖坐标 作用 将画笔从它所在的点到另一个点用线连接 ctx.stroke() 参数 作用 画 ctx.strokeStyle (‘red’) 参数 色值 作用 画笔颜色 ctx.beginPath() 参数 作用 开始使用一只新的画笔，防止之前的画笔的各种属性污染到新的图 ctx.closePath() 参数
H5基于Canvas实现电子签名并生成PDF文档
2401_84437604的博客
06-16 824
面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。为了帮助大家更好更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。前端面试题汇总。
canvas动画学习文档记录
suk_java的博客
06-17 100
canvas的使用
canvas学习
weixin_60968779的博客
11-26 474
canvas学习
Canvas学习
Pandora_417的博客
05-23 226
Canvas canvas 最早由Apple引入WebKit,用于Mac OS X 的 Dashboard,后来又在Safari和Google Chrome被实现。 基于 Gecko 1.8的浏览器,比如 Firefox 1.5, 同样支持这个元素。 <canvas> 元素是WhatWG Web applications 1.0规范的一部分,也包含于HTML 5中。 什么是Canv...
vue canvas学习
最新发布
m0_37570176的博客
06-21 226
在vue里试用一下canvas，记录一下。
Canvas学习笔记 Canvas的基础知识点
每个人都是独一无二的，把握好自己的节奏，跟着自己的心走。
05-09 1111
文章目录前言一、导航初始化属性与方法小demo二、绘制功能2.1、绘制矩形2.1.1、非面向思想实现动画2.1.2、面向对象思维实现动画2.2、绘制路径2.3、绘制圆弧(动态圆形示例)2.4、设置线型透明度(小球碰撞案例)2.5、线型的属性2.6、设置文字2.7、渐变(线型与径向)2.8、设置阴影三、绘制图片四、资源管理器(手动创建类进行管理)五、变形5.1、transloate(移动画布)5.2、rotate(画布旋转)5.3、scale(缩小绘制目标)transform（三个元素统一写）六、合成(glo
Canvas学习系列一：初识canvas
Wang1996332的博客
11-19 113
最近你开始在学习canvas，打算把学习canvas的整个学习过程当中的一些笔记与总结记录下来，如有什么不足之处还请大神们多多指出。 1. canvas介绍 Canvas元素的出现，可以说开启的W...
JavaScript学习文档大全.zip #资源分享达人#
08-04
我这里首先有一个完整的笔记(上几万字总结)，还有参考文档，其中包含：Array对象的方法参考表格，Canvas参考手册，Date对象方法参考表格，HTML事件列表，jQuery的事件方法，jQuery选择器参考手册，Math参考文档，...
canvas的入门学习
08-10
在“canvas-webgl-study-master”这个压缩包中，很可能是包含了一系列的学习资源，如示例代码、教程文档和练习项目。学习WebGL通常会涉及理解矩阵运算，因为它们在3D变换中扮演关键角色，如旋转、缩放和平移。此外，...
html5学习参考
06-07
3. `<article>`和`<section>`：用于定义文章和章节，提高了文档结构化。 4. `<aside>`：用于展示与主要内容相关的辅助信息。 5. `<figure>`和`<figcaption>`：用于图像和图表的描述。 二、媒体元素 HTML5提供了内置...
HTML参考文档
06-22
本教程和参考文档旨在帮助你深入理解和熟练运用HTML，无论你是初学者还是有经验的开发者，都能从中受益。 一、HTML基本结构 HTML文档通常由`<!DOCTYPE html>`声明开始，定义了文档类型为HTML5。接着是`<html>`元素...
HTML学习的各种帮助文档
11-24
这个压缩包可能包含HTML教程、实例代码、参考手册、常见问题解答等文档，这些资源将帮助你系统地学习和掌握HTML。例如，教程可能会从基础语法开始，然后讲解如何创建动态交互的页面，参考手册则提供了详细的标签和...
Canvas-lms 开源在线学习管理系统源码部署（生产版）_canvas lms(2)
2401_84281629的博客
05-04 961
4. 安装 Bundler， Canvas的大部分依赖都是Ruby Gems。
微信小程序中的canvas
热门推荐
流楚丶格念的博客
04-02 1万+
文章目录canvas 常用属性：canvas基本用法：注意：canvas绘制基本步骤：canvas绘制笑脸：canvas对象方法介绍： canvas 常用属性： canvas基本用法： 创建canvas.wxml文件。 <canvas canvas-id="myCanvas"></canvas> canvas组件默认样式如下。 canvas { width: 300px; height: 150px; display: block; position:
12个免费在线Logo生成器
流楚丶格念的博客
05-20 7580
都要登陆 01 https://www.graphicsprings.com/ 02 https://www.canva.com/（推荐） 03 https://www.designhill.com/tools/logo-maker 04 https://www.designevo.com/ 05 https://www.designmantic.com/logo-design 06 https://logo.squarespace.com/ 07 https://www.logaster.com/lo
HTML5 Canvas 2D 绘图规范详解
参考资料部分则提供了更多的学习和参考资源，帮助开发者深入理解和应用Canvas API。 HTML5 Canvas 1.0 教程是学习如何在网页上进行动态图形编程的重要资料，它不仅覆盖了基础的绘图操作，还包含了高级特性，是开发...
评论 14
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

呆萌宝儿姐

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值