画布canvas的基础使用

最新推荐文章于 2025-03-26 19:45:30 发布
最新推荐文章于 2025-03-26 19:45:30 发布
阅读量1.8k 收藏 15
点赞数 8
分类专栏： 前端 文章标签： html5 html dom
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42822993/article/details/120289971
版权

画布canvas的基础使用

一、基本用法

(1)创建并获取canvas对象–获取画布
通过document.getElementById()等方法取得canvas对象。
(2)取得上下文(context)
图形上下文是一个封装了很多绘图功能的对象，用于实现绘制操作，参数只能是“2d”
(3)定义填充样式
context.fillStyle=‘red’
(4)绘制填充图形、线条、边框图像等
填充图像用

			// 填充样式
             context.fillStyle = 'red'
            // 绘制填充圆
            context.fill();

边框图形用

 			context.strokeStyle = 'red'
            context.stroke();

线条用

context.lineTo(100, 100);//参数：执行本条画线操作后，的终点（x,y）是100,100
//这条直线结束的位置就是下条直线开始的位置
例1：绘制一个填充矩形

效果：
请添加图片描述

html代码

 <!-- 创建一个画布对象 -->
 	<canvas></canvas>

javaScript代码

			var canvas = document.querySelector('canvas'); //选择器获取画布
            // 2.获取上下文对象
            var context = canvas.getContext('2d'); //只针对x轴和y轴
            // 3.绘制填充样式
            context.fillStyle = 'red'//设置颜色为红色
            // 4.绘制填充矩形
            context.fillRect(10, 10, 100, 100) //第一个参数是x轴开始位置，第二个参数是y轴开始位置，第三个参数是绘制图形的宽，第四个位置是绘制图形的高

二、详细用法

1.绘制填充矩形
见例一
2.绘制边框矩形

效果：
请添加图片描述
html代码

 <!-- 创建一个画布对象 -->
 	<canvas></canvas>

javaScript代码

            //1.获取画布
            var canvas = document.querySelector('canvas');
            // 2.获取画布上下文对象
            var context = canvas.getContext('2d');
            // 3.设置轮廓样式
            context.strokeStyle = 'red'
            // 4.设置轮廓的线宽
            context.lineWidth = 3; //如果线宽等于宽高，会变成填充图像
            // 5.绘制边框矩形或者轮廓矩形
            context.strokeRect(10, 10, 100, 100);//第一个参数是x轴开始位置，第二个参数是y轴开始位置，第三个参数是绘制图形的宽，第四个位置是绘制图形的高
3.绘制填充圆或者边框圆

效果：

请添加图片描述请添加图片描述

html代码

 <!-- 创建一个画布对象 -->
 	<canvas></canvas>

javaScript代码

 // 获取画布
            var canvas = document.querySelector('canvas');
            // 获取画布上下文对象
            var context = canvas.getContext('2d');
            // 绘制圆直线曲线需要路径 开始路径
            context.beginPath();
            // 圆的路径 x y r 开始弧度 结束弧度（ Math.PI --180度） 圆的方向是否是逆时针路径
            context.arc(50, 50, 50, 0, Math.PI * 2);
            // 结束路径
            context.closePath();
            // 填充样式
            context.fillStyle = 'red'
            // 绘制填充圆
            context.fill();
            // 绘制轮廓圆
            //![请添加图片描述](https://img-blog.csdnimg.cn/f9395b2698ce41e6ae0fbb4e1df14d0f.jpg)
 context.strokeStyle = 'red'
            // context.stroke();
4.绘制一个扇形

效果：
请添加图片描述

html代码

 <!-- 创建一个画布对象 -->
 	<canvas></canvas>

javaScript代码

 			// 获取画布
            var canvas = document.querySelector('canvas');
            // 获取画布上下文对象
            var context = canvas.getContext('2d');
            // 绘制圆直线曲线需要路径 开始路径
            context.beginPath();
            // 绘制四分之一圆
            context.arc(100,100,50,0,Math.PI/2);
            // // 直线路径
            context.lineTo(100, 100);//参数：执行本条画线操作后，的终点（x,y）是100,100
            context.lineTo(150, 100);//这条直线起点就是上条直线结束的位置
            // 结束路径
            context.closePath()
            // 绘制轮廓
            context.strokeStyle = 'red'
            context.stroke();
5.线性渐变
        1.获取画布
        2.获取上下文
        3.声明一个线性渐变对象  渐变x、y轴开始的位置 结束位置
            context.createLinearGradient(0,0,400,400)
        4.给渐变对象添加渐变色  范围 0 ~ 1 
        5.把渐变对象给到样式填充图形   填充图形的时候设置样式
        6.绘制一个图形

效果：
请添加图片描述

html代码

 <!-- 创建一个画布对象 -->
     <canvas width="400px" height="400px"></canvas>

javaScript代码

    <script>
        window.onload = function(){
            // 1.获取画布
            var canvas = document.querySelector('canvas')
            // 2.获取上下文
            var context = canvas.getContext('2d')
            // 3.声明一个线性渐变对象  渐变x、y轴开始的位置 结束位置
            var g = context.createLinearGradient(0,0,400,400)
            // 4.给渐变对象添加渐变色  范围 0 ~ 1 
            g.addColorStop(0,'red')
            g.addColorStop(0.5,'blue')
            g.addColorStop(1,'green')
            // 5.把渐变对象给到样式填充图形   填充图形的时候设置样式
            context.fillStyle= g
            // 绘制一个图形
            context.fillRect(0,0,400,400)
        }
    </script>
6.径向渐变(圆的渐变并且可以不是同心圆)

效果：
请添加图片描述

 <!-- 创建一个画布对象 -->
     <canvas width="400px" height="400px"></canvas>

javaScript代码

 <script>
 window.onload = function(){
            // 1.获取画布
            var canvas = document.querySelector('canvas')
            // 2.获取上下文
            var context = canvas.getContext('2d')
            // 3.声明一个径向渐变对象  渐变开始圆(内圆)x、y轴的位置 开始圆半径 渐变的结束圆(外圆)的 x、y坐标 结束圆的半径
            var g = context.createRadialGradient(200,200,100,200,200,200)
            // 4.给渐变对象添加渐变色  范围 0 ~ 1 
            g.addColorStop(0,'red')
            g.addColorStop(0.5,'blue')
            g.addColorStop(1,'green')
            // 把渐变对象给到样式填充图形   填充图形的时候设置样式
            context.fillStyle= g
            // 绘制一个图形
            context.fillRect(0,0,400,400)
        }
    </script>
7.绘制文本

效果：
请添加图片描述

html代码

 <!-- 创建一个画布对象 -->
     <canvas width="400px" height="400px"></canvas>

javaScript代码

    <script>
        var canvas = document.querySelector('canvas')
        var context = canvas.getContext('2d')
        // 绘制文本：str:绘制文本字符串 x,y:文本的显示坐标  第4个参数可以放字体类型(宋体)
        context.font = '16px blod';//字体样式
        context.fillText('填充文本', 100, 100)
        context.strokeText('轮廓文本', 200, 200)
    </script>
8.绘制图片

格式：context.drawImage(img,x,y,width,height);
           context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
参数解释：
           img 规定要使用的图像、画布或视频。
           sx 可选。开始剪切的 x 坐标位置。
           sy 可选。开始剪切的 y 坐标位置。
           swidth 可选。被剪切图像的宽度。
           sheight 可选。被剪切图像的高度。
           x 在画布上放置图像的 x 坐标位置。
           y 在画布上放置图像的 y 坐标位置。
           width 可选。要使用的图像的宽度。（伸展或缩小图像）
           height 可选。要使用的图像的高度。（伸展或缩小图像）

效果：
请添加图片描述

html代码

 <!-- 创建一个画布对象 -->
    <canvas width="400px" height="400px" style="background-color: pink;"></canvas>

javaScript代码

    <script>
        var canvas = document.querySelector('canvas')
        var context = canvas.getContext('2d')
         // 创建img节点	绘制图片到画布中，图片dom节点，img节点绘制或者创建img节点
        var img = new Image()
        img.src = 'https://img0.baidu.com/it/u=260444583,2287575279&fm=26&fmt=auto&gp=0.jpg'
        // 绘制图片到画布中  从0,0点开始绘制图片，绘制一个200*200的图片
        img.onload = function(){
            context.drawImage(img,0,0,200,200);
        }
    </script>
9.绘制视频

效果：
请添加图片描述

html代码

 <!-- 创建一个画布对象 -->
    <canvas width="400px" height="400px"></canvas>
    <video src="../day03/音视频/1.mp4" width="400px" controls autoplay muted></video>

javaScript代码

    <script>
        window.onload = function () {
            var canvas = document.querySelector('canvas')
            var context = canvas.getContext('2d')
            var video = document.querySelector('video')
            draw()
            function draw() {
                          //参数 视频 放置在x y 视频宽 视频高
                context.drawImage(video, 0, 0, 200, 200)
                requestAnimationFrame(draw)//j加上后会与视频同步显示画面
            }
        }
    </script>

三、结语

           画布的基础使用很简单，但如果是更高级的使用就很难了，难道可以分出一个职业专门来绘制成品来投入使用，常见的H5小游戏，微信小程序就能看到canvas的影子，这同样也是一个面试的加分项，能看到这说明你很有耐心，这不点个赞再走~谢谢。。哈哈哈
在这里插入图片描述

【canvas知识】canvas的基本使用
weixin_44337386的博客
04-17 1104
简单介绍canvas的基本使用
HarmonyOS Next开发学习手册——使用画布绘制自定义图形 (Canvas)
maniuT的博客
07-12 1154
使用 CanvasRenderingContext2D对象 在Canvas画布上绘制。@Entry@Component//用来配置CanvasRenderingContext2D对象的参数，包括是否开启抗锯齿，true表明开启抗锯齿。//用来创建CanvasRenderingContext2D对象，通过在canvas中调用CanvasRenderingContext2D对象来绘制。build() {//在canvas中调用CanvasRenderingContext2D对象。
canvas 基本用法
似水流年QC的博客
07-05 5020
Canvas 是 HTML5 新增的元素，它就像一块幕布，可通过JavaScript脚本在 Web 页面上绘制图形、动画和其他可视化内容。四、canvas应用场景。一、什么是canvas。二、canvas用法。
canvas基本使用
最新发布
summerMiracle的博客
03-26 118
【代码】canvas基本使用。
Canvas（画布）的使用
weixin_44767973的博客
05-03 3410
HTML5-Canvas元素1、Canvas（画布）的概述2、画布的使用2.1、创建一个画布 1、Canvas（画布）的概述 Canvas通过Javascript在网页上来绘制2D图形。Canvas是逐像素进行渲染的。开发者可以通过javascript脚本实现任意绘图。可以通过多种方法使用canvas元素绘制路径、矩形、圆形、字符以及添加图像。 在Canvas中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。画 2、画布
canvas画布基础用法
qq_40237472的博客
12-31 240
对应html代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Canvas</title> <style> body{ text-align: center; padding-top: 20px; ...
HTML5 画布canvas使用方法
09-28
下面将详细探讨HTML5画布canvas使用方法的知识点。 首先，HTML5中的canvas元素是一个矩形区域，它没有自身的绘图能力，但是可以通过JavaScript来控制其上每一个像素。通过canvas元素，可以执行各种绘图任务，例如...
画布Canvas基础知识讲解
03-25
画布Canvas基础知识讲解 HTML5 规范引进了很多新特性，其中最令人期待的之一就是 Canvas 元素。HTML5 Canvas 提供了通过 JavaScript 绘制图形的方法，此方法使用简单但功能强大。每一个 Canvas 元素都有一个“上...
Android 画布Canvas之连线动画Demo
12-11
在这个"Android画布Canvas之连线动画Demo"中，我们将深入探讨如何利用Canvas实现动态的连线动画效果，包括控制动画速度、线条颜色和线宽。 首先，我们要理解Canvas的基本绘图操作。`Canvas`提供了如`drawLine()`、`...
微信小程序画布canvas
08-19
一、`canvas`基础 1. `canvas`标签：在微信小程序的`wxml`文件中，我们通过`<canvas>`标签来引入画布。它需要一个唯一的`id`属性，以便在`wx:if`或`hidden`控制其显示与隐藏。 ```html <canvas id="myCanvas" ...
Canvas 画布基本用法详解
Dominic_W的博客
04-15 1266
lineWidth属性定义在画布中绘制时要使用的线条宽度。必须在调用 stroke() 方法之前设置。属性定义在画布中绘制时要使用的样式。必须在调用 stroke() 方法之前设置。lineCap属性定义线的端部样式（butt、round 或 square），默认为 square（方形）。必须在调用 stroke() 方法之前设置。
Canvas（画布）类的使用
ShortChin的博客
06-13 4728
Canvas类 的继承关系：  Canvas类说明：     canvas（画布）是用来在屏幕上绘画的类，可以根据一定的设置画出自定义的任何视图。 Canvas类常用方法：         draw系列绘图方法： 弧线（Arc）         填充颜色（argb/color）        图片（bitmap）           圆形（Circle）      椭圆
canvas画布的使用
Mr_Liu3518的博客
08-29 883
canvas画布**上一篇使用画布制作了一个变化的气泡，这篇写一下画布怎样使用 1.HTML5的canvas元素使用JavaScript在网页上绘制图像，画布是一个矩形区域，可以控制其每一像素。2.画布默认大小是300*150 不要用css去设置宽高，会等比例缩放。<canvas id="myCanvas" width="200" height="100">请升级您的浏览器（不识别的浏览器看到的
canvas画布的使用(一)
qq_48445738的博客
09-27 882
canvs画布介绍 canvas 就是画布的意思 1.获取canvas 元素 2.搭建canvas绘制环境(我们所有的绘制行为都是在这个环境下进行的) 3.在内存绘制(仅仅存在于内存中 我们看不到) 4.绘制到页面上(调用stroke方法) 1.创建一个画布 <canvas id="myCanvas"> </canvas> 1.获取canvas元素 2.搭建canvas画布的绘制环境 var canvas = document.getElementById("myCanv
canvas的基础使用
记录工作
12-16 1631
效果：默认颜色黑色，可以通过fillStyle设置进行自定义。方法类似，一个填充，一个属于描边。在 Canvas 中可以使用。方法可以对折线进行闭合。方法进行矩形填充,其实和。进行文本水平对齐方式设置。进行文本垂直对齐方式设置。类似，但是需要手动调用。3、等待图片加载完成。
canvas的基本使用
weixin_30892763的博客
07-05 150
一、定义 canvas最早是由Apple引入Webkit的，<canvas>元素包含于HTML5中 HTML5的canvas元素使用JavaScript在网页上绘制图像，画布是一个矩形区域，可以控制其每一像素，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法 二、基本使用（步骤） ①创建canvas元素，向HTML5页面添加canvas元素（准备画布） ②设置画布...
微信小程序canvas画布基础图形绘制教程
一、canvas基础概念 微信小程序中的canvas是HTML5的Canvas元素的封装，它提供了一块画布区域，开发者可以在上面绘制图形、图片等。使用canvas前，需要在wxml文件中通过标签引入canvas组件，并设置相应的宽高属性。在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值