canvas的基本使用

最新推荐文章于 2024-05-27 08:51:51 发布
最新推荐文章于 2024-05-27 08:51:51 发布
阅读量1.7k 收藏 4
点赞数 1
分类专栏： Web前端 文章标签： html css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jingde528/article/details/127766860
版权

1、canvas的定义

canvas 元素是HTML5中使用 JavaScript 在网页上绘制图像的

示例一：基本的创建以及使用canvas
 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            * {
                margin: 0px;
                padding: 0px;
            }
            canvas {
                margin: auto;
                background-color: aqua;
                /* canvas一般不在style中设置宽高，会造成放大或缩小 */
                /* width: 600px;
                height: 400px; */
            }
        </style>
    </head>
    <body>
        <canvas id="myCanvas" width="600px" height="400px"></canvas>    
    </body>
    <script>
        //canvas默认宽高是300*150
        let myCanvas = document.querySelector('#myCanvas')
        //获取一个 绘制上下文
        let context = myCanvas.getContext('2d');
        //IE以下不兼容，canvas绘制出来的图片是位图
        context.rect(100,100,300,40);
        
        //绘制路径
        //context.stroke(); //绘制路径，绘制空心  矩形
        
        context.fill(); //填充
        context.fillRect(100,150,300,40);
        context.strokeRect(100,200,300,40);
        
        //清空矩形区域
        context.clearRect(250,150,150,20);
        //在做大部分反复的特效的时候，基本上都需要用到这个清空的方法
        
        
    </script>
</html>

2、canvas使用步骤

1、首先创建canvas元素

<canvas id="myCanvas" width="600" height="400"></canvas>

2、获取canvas元素

let myCanvas = document.querySelector('#myCanvas');

3、使用2D 绘图上下文

let ctx = myCanvas.getContext('2d');

4、绘制图形

方法描述
rect()创建矩形
fillRect()绘制填充的矩形
strokeRect()绘制无填充的矩形
clearRect()矩形内清除指定的区域

示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <canvas id="myCanvas" width="600" height="400"></canvas>
    </body>
    <script>
        let myCanvas = document.querySelector('#myCanvas');
        let ctx = myCanvas.getContext('2d');
        
        ctx.rect(100,100,300,40);
        
        //四种设置画笔的颜色
        ctx.fillStyle = 'yellow';
        // ctx.fillStyle = '#f00';
        // ctx.fillStyle = 'rgb(0,255,0)';
        // ctx.fillStyle = 'rgba(0,0,255,.5)';
        // ctx.fillStyle = 'hsl(0,100%,50%)';//色相饱和度亮度
        
        ctx.strokeStyle = 'black';
        // ctx.strokeStyle = '#f00';
        // ctx.strokeStyle = 'rgb(0,255,0)';
        // ctx.strokeStyle = 'rgba(0,0,255,.5)';
        // ctx.strokeStyle = 'hsl(0,100%,50%)';//色相饱和度亮度
        
        ctx.fill();
        ctx.stroke();
        
        ctx.fillRect(100,150,300,40);
        ctx.strokeRect(100,200,300,40);
        
        //设置线宽lineWidth
        ctx.lineWidth = 2;
        ctx.strokeRect(100,250,300,40);
        
        ctx.lineWidth = 3;
        ctx.strokeRect(99.5,299.5,300,40);
        
        // canvas的边框绘制,是从边框的中心开始绘制
        // 因为最小的绘制单位是1px,所以会出现 线宽 0.5的bug的问题
        // 所以一般绘制是偶数线宽绘制
        // 奇数绘制 也可以相应的减少0.5px
    </script>
</html>

五、绘制路径

方法|描述
fill()|填充当前绘图路径
stroke()|绘制已定义的路径
beginPath()|起始一条路径
moveTo()|路径移动到画布中的哪个点
closePath()|创建从移动到的位置点回到起始点的路径
lineTo()|添加一个新点同时在canvas画布中创建当前点到最后指定点的路径

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            canvas{
                background-color: antiquewhite;
            }
        </style>
    </head>
    <body>
        <canvas id="myCanvas" width="600px" height="400px"></canvas>
    </body>
    <script>
        let myCanvas = document.querySelector('#myCanvas');
        let cxt = myCanvas.getContext('2d');
        
        cxt.lineWidth = 10;
        cxt.strokeStyle = 'red';
        
        //把笔移动到起始位置
        cxt.beginPath();
        cxt.moveTo(0,100);
        cxt.strokeStyle = 'blue';
        cxt.lineTo(600,100);
        cxt.stroke();
        
        cxt.beginPath()
        cxt.moveTo(500,0);
        cxt.strokeStyle = 'orange';
        cxt.lineTo(500,400);
        cxt.stroke();
            
        cxt.beginPath();
        cxt.moveTo(0,300);
        cxt.strokeStyle = 'black';
        cxt.lineTo(600,300);
        cxt.stroke();
            
        
        cxt.beginPath();
        cxt.moveTo(100,0);
        cxt.strokeStyle = 'magenta';
        cxt.lineTo(100,600);
        
        //笔触让浏览器绘制
        cxt.stroke();
        //strokeStyle会被后边的覆盖，可以加上beginPath做处理
        //每次开启路径，要指定 绘制方式（stroke或fill）
        //开启路径后，可以隔开与上一个的路径的关系，让 每次绘制 独立开来
        
        //闭合路径
        cxt.beginPath();
        cxt.moveTo(300,50);
        cxt.lineTo(500,100);
        cxt.lineTo(100,300);
        
        //自动闭合路径
        cxt.closePath();
        cxt.stroke();
    </script>
</html>

lineJoin属性

可以选择边界连接处的样式

属性值描述
miter斜接
round圆滑
bevel折角

代码示例：
 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            canvas {
                background-color: #FAEBD7;
            }
        </style>
    </head>
    <body>
        <canvas id="myCanvas" width="600px" height="400px"></canvas>
    </body>
    <script>
        let myCanvas = document.querySelector('#myCanvas');
        let ctx = myCanvas.getContext('2d');
        
        ctx.lineWidth = 10;
        //边界连接处的样式
        //ctx.lineJoin = 'miter'; 
        //ctx.lineJoin = 'round'; //圆滑
        ctx.lineJoin = 'bevel'; //折角
        
        //闭合路径
        ctx.beginPath();
        ctx.moveTo(300,50);
        ctx.lineTo(500,100);
        ctx.lineTo(100,300);
        
        //自动闭合路径
        ctx.closePath();
        ctx.stroke();
    </script>
</html>

lineCap属性

可以选择端点的样式

属性值描述
butt默认。向线条的每个末端添加平直的边缘。
round向线条的每个末端添加圆形线帽
square向线条的每个末端添加正方形线帽

代码示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            canvas {
                background-color: #FAEBD7;
            }
        </style>
    </head>
    <body>
        <canvas id="myCanvas" width="600px" height="400px"></canvas>
    </body>
    <script type="text/javascript">
        let myCanvas = document.querySelector('#myCanvas');
        let ctx = myCanvas.getContext('2d');
        
        ctx.lineWidth = 20;
        //ctx.strokeStyle = 'red';
        ctx.strokeStyle = 'black'
        
        ctx.beginPath();
        ctx.moveTo(100,100);
        ctx.lineTo(500,100);
        //端点的样式
        ctx.lineCap = 'butt';
        ctx.stroke();
        
        ctx.beginPath();
        ctx.moveTo(100,200);
        ctx.lineTo(500,200);
        //端点的样式
        ctx.lineCap = 'round';
        ctx.stroke();
        
        ctx.beginPath();
        ctx.moveTo(100,300);
        ctx.lineTo(500,300);
        //端点的样式
        ctx.lineCap = 'square';
        ctx.stroke();
        
        
    </script>
</html>

jingde528
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
H5学习笔记（三）--canvas绘制矩形、路径、曲线和变换
qq_44753552的博客
09-14 1068
目录1、绘制矩形笔记：实例2、绘制路径笔记：实例3、绘制曲线canvas绘制圆形canvas绘制圆弧二次贝塞尔三次贝塞尔 1、绘制矩形 笔记： HTML中的元素canvas只支持一种原生的图形绘制：矩形。所有其他 的图形的绘制都至少需要生成一条路径 1.绘制矩形 canvas提供了三种方法绘制矩形： ---->绘制一个填充的矩形（填充色默认为黑色） fillRect(x, y, width, height) ---->绘制一个矩形的边框（默认边框为:一像素实心黑色）
canvas基本用法
ICY___的博客
02-19 382
canvas是一个强大的绘图及制作动画和游戏手段，下面介绍canvas利用js的API实现基本画图功能。 划线： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt;
canvas 添加html元素,给canvas添加内容
weixin_31951365的博客
06-14 2328
画布是一个矩形区域，您可以控制其每一像素。 canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。 创建 Canvas 元素 向 HTML5 页面添加 canvas 元素。 规定元素的 id、宽度和高度： 通过 JavaScript 来绘制 canvas 元素本身是没有canvas 画布与画布内容都缩小如何实现?如何将canvas复制给另外一个canvascanvas怎么根据坐标获取...
HTML5 canvas元素
流萤梦的博客
10-18 1660
之前，我对于canvas元素的使用有些误解，在查询了相关资料以及自己实操了一些例子后简单的分享一下如何使用canvas元素。 1、在页面中添加元素 和之前我们所了解的其他标签元素一样，比如说，我要写一个段落，毫无疑问，我会添加一个p标签。那么我要做一个导航栏，也是直接来一个标签nav，同样的道理，我添加画布元素该怎么做呢？ &lt;!DOCTYPE html&gt; &lt;html la...
Canvas使用详细教学：从基础绘图到进阶动画再到实战（海报生成、Flappy Bird 小游戏等），掌握绘图与动画的秘诀
最新发布
JINGWHALE
05-27 374
本文从基础绘图到进阶动画再到实战（海报生成、Flappy Bird 小游戏等），详细介绍了Canvas基础绘图方法、颜色与样式、图像操作、动画等内容，让你掌握Canvas绘图与动画的秘诀。
关于canvas的使用（超详细的canvas知识体系讲解）
adminsir0的博客
06-07 8613
canvas,js特效，图形绘制，路径绘制，图片绘制，动画效果，贝塞尔曲线
canvas简易使用教程
BUG_CONQUEROR_LI的博客
09-19 6552
canvas绘制矢量图: 是HTML5新增的，一个可以使用脚本(通常为JavaScript) 在其中绘制图像的HTML元素。提供了一个通过和的元素来绘制图形的方式。它可以用于动画、游戏画面、数据可视化、图片编辑(如照片集)以及实时视频处理等方面。
canvas 基本用法
似水流年QC的博客
07-05 3210
Canvas 是 HTML5 新增的元素，它就像一块幕布，可通过JavaScript脚本在 Web 页面上绘制图形、动画和其他可视化内容。四、canvas应用场景。一、什么是canvas。二、canvas用法。
Canvas的基本介绍与使用，图解+案例带你快速上手Canvas
~~~
09-16 4822
Canvas的基本介绍与使用，图解+案例带你快速上手Canvas
canvas的使用
ltians95817的博客
03-08 196
canvas实现烟花效果 1.思路 （1）鼠标点击画布，在画布初出现烟花绽放效果； （2）在鼠标点击处随机生成若干粒子（圆）； （3）对每个粒子设置，使其有自己的运动轨迹； （4）给粒子添加事件，使其运动起来。 2.功能实现 在html中设置canvas画布大小，边框颜色及大小， <canvas id="myCanvas" width="400px;" height="400px" >当前浏览器不支持canvas</canvas> #myCanvas{ borde
canvas 基本demo
12-09
"canvas 基本demo"是一个利用AntV G6库实现的Canvas应用示例，它展示了如何在React环境中使用Canvas进行图形交互和自定义设计。 首先，AntV G6是一款强大的图形图表库，它专为数据可视化设计，支持多种图表类型，如...
canvas基本画图功能
10-25
canvas，canvas UI，canvas画图功能
HTML5 canvas 基本语法
09-28
不过要注意，虽然大多数现代浏览器都支持2D canvas，但在老版本的浏览器中可能不被支持，因此在使用canvas时应提供适当的回退内容，以确保兼容性。通过熟练掌握canvas的基本语法和API，开发者能够创建出丰富多样的...
使用canvas绘制钟表
11-06
这个过程涉及了canvas的基本绘图方法（如arc、beginPath、lineTo、stroke等），角度转换（Math.cos和Math.sin），以及动态更新图形的方法（通过setInterval）。通过深入理解和实践，你可以利用canvas实现更多复杂的...
详解HTML5 canvas绘图基本使用方法
09-28
绘制线段是canvas的基本操作之一。`moveTo(x, y)`方法用来设定当前路径的起点，而`lineTo(x, y)`则从当前点到指定点画出一条直线。例如，如果我们要从(10,10)画到(200,200)，需要先调用`moveTo(10,10)`，然后调用`...
【前端】【canvas详解 非常详细的使用方法】
PiPiFamily的博客
06-08 4188
canvas使用详细教学
Canvas详细使用方法(一)
聪明勇敢有力气的博客
03-11 2060
Canvas详细使用
canvas详细入门教程（1W字 吐血分享）
热门推荐
nvgis的博客
10-14 3万+
canvas入门必看教程，学完可绘制动画！
canvas的使用方法
weixin_46560512的博客
11-08 3352
    之前学习canvas的时候就觉得canvas和一般的节点有一点不一样，现在重新看了一下，结合大佬们的提示，我又来了自导自演一波，不对的地方还希望大家斧正.     canvas对我来说，是用在web前端和小程序，我接触前端比较少，就主要说一下web方面的吧（小程序直接动态渲染就行）。总体上来说，和一般标签一样，有以下两种方法：     方法一，使用canvas标签+id/class来渲染，其动态变化的实现需要用到getComputedStyle函数，这个函数的用法是，得到初始化的样式 ...
java canvas graphics_android.graphics Canvas基本使用 转
06-09
好的，我可以为您解答关于Java Canvas 和 Android.graphics.Canvas的基本使用。 Java Canvas是一个在awt，swing等GUI框架中用于绘制图形的类，它提供了一个类似画布的面板，我们可以在上面绘制各种图形和文字。 下面是Java Canvas的基本使用方法： 1. 创建一个Canvas对象： ``` Canvas canvas = new Canvas(); ``` 2. 获得一个Graphics对象： ``` Graphics g = canvas.getGraphics(); ``` 3. 使用Graphics对象绘制图形： ``` g.drawLine(0, 0, 100, 100); g.drawRect(50, 50, 100, 100); g.drawOval(100, 100, 50, 50); g.drawString("Hello, World!", 200, 200); ``` 这些方法可以绘制线条，矩形，椭圆和文本。 在Android中，Canvas是一个类用于绘制图形和文字，我们可以使用它来自定义视图或绘制自己的UI元素。 下面是Android.graphics.Canvas的基本使用方法： 1. 创建一个Canvas对象： ``` Canvas canvas = new Canvas(bitmap); ``` 这里的bitmap是我们要绘制的位图对象。 2. 使用Canvas对象绘制图形： ``` Paint paint = new Paint(); paint.setColor(Color.RED); paint.setStrokeWidth(5); canvas.drawLine(0, 0, 100, 100, paint); canvas.drawRect(50, 50, 100, 100, paint); canvas.drawOval(100, 100, 150, 150, paint); canvas.drawText("Hello, World!", 200, 200, paint); ``` 这些方法可以绘制线条，矩形，椭圆和文本。我们可以使用Paint对象来设置绘制的颜色，线条宽度等属性。 以上就是Java Canvas和Android.graphics.Canvas的基本使用方法，希望能对您有所帮助。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值