canvas的基础讲解

已于 2023-04-11 17:40:45 修改
阅读量468 收藏 1
点赞数
文章标签： html 前端 javascript
于 2023-04-07 14:06:19 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52421092/article/details/130009271
版权

目录

一、低版本浏览器不显示canvas, 并给出提示

二、canvas是一个行内元素，想要居中就需要把他变成块元素

三、画线

 四、画矩形

五、清除画布

 六、画圆

七、画圆弧

一、低版本浏览器不显示canvas, 并给出提示

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
    <!-- canvas在低版本中不兼容，需要提示用户 -->
    <canvas width="500px" height="500px">您的浏览器版本过低，请升级浏览器或者使用chrome打开!</canvas>
</body>
</html>

能显示canvas就没有文字提示，不显示canvas就显示提示文字

二、canvas是一个行内元素，想要居中就需要把他变成块元素

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        canvas {
            display: block;
            margin: 0 auto;
            border: 1px solid #aaa;
        }
    </style>
</head>
<body>
    <!-- canvas在低版本中不兼容，需要提示用户 -->
    <canvas width="500px" height="500px">您的浏览器版本过低，请升级浏览器或者使用chrome打开!</canvas>
</body>
</html>

 效果：

三、画线

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
    <canvas id="cont" width="500px" height="500px"></canvas>
    <script>
        // 只能使用原生js操作canvas， jq不可以
        // 画一条线的步骤

        //(1)获取画布
        var canvas = document.querySelector("#cont");
        //(2)获取画布的能力
        var ctx = canvas.getContext("2d");
        // (3)开始一条路径
        ctx.beginPath();
        // (4)确定起点
        ctx.moveTo(100, 100);
        // (5)确定结束点
        ctx.lineTo(400, 400);
        // 添加线宽和颜色  (这个必须在着色之前写)
        // 设置颜色
        ctx.strokeStyle = 'green'
        // 设置线宽
        ctx.lineWidth=5
        // (6)着色
        ctx.stroke();
        // (7)结束路径
        ctx.closePath();

    </script>
</body>
</html>

效果：

四、画虚线

 语法：

ctx.setLineDash([虚线长度, 虚线间隔])
drawLine(起始点的x坐标, 起始点的y坐标, 终点的x坐标, 终点的y坐标, 虚线的颜色 )

四、画矩形

rect(x, y, width, height)  // 可描边、填充
fillRect(x, y, width, height)  // 不可描边、只能填充
strokeRect(x, y, width, height)  // 只能描边、不可填充
x矩形左上角的x坐标
y矩形左上角的y坐标
width矩形的宽度，以像素为单位
height矩形的高度，以像素为单位

注意： 注意需要填充和描边的   先填充后描边   否则填充会压着描边

案例：

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
    <canvas id="cont" width="500px" height="500px"></canvas>
    <script>
        //(1)获取画布
        var canvas = document.querySelector("#cont");
        //(2)获取画布的能力
        var ctx = canvas.getContext("2d");



        /**
         * rect(x, y, width, height) // 有描边也有填充
        */
        ctx.rect(100, 100, 300, 200)
        // 填充 
        ctx.fillStyle = "red"
        ctx.fill();
        // 描边
        ctx.strokeStyle = 'blue'
        ctx.lineWidth=5
        ctx.stroke();

        /**
         * fillRect(x, y, width, heihgt)  // 只能填充， 不可描边
        */
        ctx.fillStyle = 'pink'
        ctx.fillRect(100, 400, 100, 1000)

        /**
         * strokeRect(x, y, width, heihgt)
        */
        ctx.strokeStyle= 'gold'
        ctx.strokeRect(300, 400, 100, 100)


        ctx.closePath();
    </script>
</body>
</html>

 效果：

五、清除画布

语法：

clearRect(x, y, width, height)

案例：

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
    <canvas id="cont" width="500px" height="500px"></canvas>
    <script>
        //(1)获取画布
        var canvas = document.querySelector("#cont");
        //(2)获取画布的能力
        var ctx = canvas.getContext("2d");


        ctx.rect(100, 100, 300, 200)
        // 填充 
        ctx.fillStyle = "red"
        ctx.fill();
        // 描边
        ctx.strokeStyle = 'blue'
        ctx.lineWidth=5
        ctx.stroke();
        
        // 清除画布
        ctx.clearRect(120, 120,200, 100)
        
        ctx.closePath();
    </script>
</body>
</html>

效果：

 六、画圆

语法：

arc(x, y, radius, startAngle, endAngle, counterclockwise)

参数

x圆心 x 坐标
y圆心 y 坐标
radius半径
startAngle开始的角度
endAngle结束的角度
counterclockwisetrue: 逆时针、false: 顺时针

案例：

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
    <canvas id="cont" width="500px" height="500px"></canvas>
    <script>
        //(1)获取画布
        var canvas = document.querySelector("#cont");
        //(2)获取画布的能力
        var ctx = canvas.getContext("2d");


        ctx.arc(250, 250, 200, 0, Math.PI*2, false)
        ctx.fillStyle = 'gold'
        ctx.fill()
        
        ctx.lineWidth = 10;
        ctx.strokeStyle = 'red'
        ctx.stroke()
        
        ctx.closePath();
    </script>
</body>
</html>

效果：

七、画圆弧

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
    <canvas id="cont" width="500px" height="500px"></canvas>
    <script>
        //(1)获取画布
        var canvas = document.querySelector("#cont");
        //(2)获取画布的能力
        var ctx = canvas.getContext("2d");

        ctx.beginPath()
        ctx.arc(100, 100, 100, 0, Math.PI*1, true)
        ctx.stroke()

        ctx.beginPath()  // 当前使用了新了一个beginPath()   所以上一个不需要closePath   因为他默认给你加上了
        ctx.arc(300, 100, 100, 0, Math.PI*1, false)
        ctx.stroke()
        
        ctx.closePath();
    </script>
</body>
</html>

注意： 当前使用了新了一个beginPath()   所以上一个不需要closePath   因为他默认给你加上了

八、绘制图片

方式一

// 在画布上定位图像
ctx.drawImage(img, x, y)

 方式二

// 在画布上定位图像  并规定图像的宽、高
ctx.drawImage(img, x, y, width, height)

方式三

// 剪切图像，并在画布上定位被裁剪的部分
ctx.drawImage(img, sx, sy, swidth, sheight, x, y, width, height)

 参数：

img要使用的图像、画布、视频
sx可选。开始剪切的 x 坐标
sy可选。开始剪切的 y 坐标
swidth可选。被剪切图像的宽度
sheight可选。被剪切图像的高度
x在画布上放置图像的 x 坐标
y在画布上放置图像的 y 坐标
width可选。 要使用的图像的宽度。（伸展或缩小图像）
height可选。 要使用的图像的高度。（伸展或缩小图像）

八、案例：小球碰壁检测

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
    <canvas id="cont" width="500px" height="500px"></canvas>
    <script>
        //(1)获取画布
        var canvas = document.querySelector("#cont");
        //(2)获取画布的能力
        var ctx = canvas.getContext("2d");
        // 画布宽高
        var w=h=500;
        var x = 100;
        var y = 100;
        var r = 30;

        // 水平速度
        var xSpeed = 10;
        // 垂直运动
        var ySpeed = 6;

        setInterval(function() {
            // 每次都要清除整个画布
            ctx.clearRect(0, 0, w, h);

            // 在小球碰到边缘时，速度取相反即可
            if(x-r <= 0 || x+r > w ) {
                xSpeed = -xSpeed;
            }
            x = x+xSpeed

            if(y-r <= 0 || y+r > w ) {
                ySpeed = -ySpeed;
            }
            y = y+ySpeed
            
            // 水平运动
            drawCircle(x, y, r);
        }, 50)

        function drawCircle(x, y, r) {
            // 加这个相当于把上面一次的画笔清除掉  否则就相当于你的笔重来都没有离开过画布
            ctx.beginPath()
            ctx.arc(x, y, r, 0, Math.PI*2);
            ctx.fillStyle = 'gold'
            ctx.fill()
        }
    </script>
</body>
</html>

效果：碰到周围就会反弹

 九、案例：小球碰壁检测（面向对象）

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
    <canvas id="cont" width="500px" height="500px"></canvas>
    <script>
        //(1)获取画布
        var canvas = document.querySelector("#cont");
        //(2)获取画布的能力
        var ctx = canvas.getContext("2d");
        // 画布宽高
        var w = 500
        var h = 500
        var ballArr = []

        /**
         * 面向对象
         * 
        */
        function r(num) {
            return Math.random()*num
        }
        /**
         * @param x       起始x坐标
         * @param y       起始y坐标
         * @param r       小球半径
         * @param color   小球颜色
         * @param xSpeed  x轴速度
         * @param ySpeed  y轴速度
         * @author: @郑建
         */        
        function Ball() {
            this.x = r(5) + 60;
            this.y = r(3) + 60;
            this.r = r(50) + 10 // [10, 100)
            this.color = '#' + parseInt(Math.random()*0xffffff).toString(16)

            this.xSpeed = r(3) + 2;  // [2, 5)
            this.ySpeed = r(3) + 1;  // [1, 4)
        }

        // 在原型链上定义小球的公共方法
        Ball.prototype.show = function() {
            this.run()
            ctx.beginPath();
            ctx.arc(this.x, this.y, this.r, 0, Math.PI*2);
            ctx.fillStyle = this.color
            ctx.fill();
        }
        // 在原型链上定义小球的公共方法
        Ball.prototype.run = function() {
            if(this.x-this.r <= 0 || this.x+this.r >= w) {
                this.xSpeed = -this.xSpeed
            }
            this.x = this.x + this.xSpeed

            if(this.y-this.r <= 0 || this.y+this.r >= w) {
                this.ySpeed = -this.ySpeed
            }
            this.y = this.y + this.ySpeed

        }

        
        for(var i = 0; i < 1000; i++) {
            var ball = new Ball()
            ballArr.push(ball)
            ball.show()
        }

        setInterval(function() {
            ctx.clearRect(0, 0, w, h)
            for(var i = 0; i < ballArr.length; i++) {
                var ball = ballArr[i]
                ball.show()
            }
        }, 20)
    </script>
</body>
</html>

 效果：

十、画文字

1、基础显示

语法：

fillText(text, x, y, maxWidth);  // 实心文字
strokeText(text, x, y, maxWidth);  // 空心文字

参数：

text画布上输出的文本
x开始绘制文本的x坐标位置
y开始绘制文本的y坐标位置
maxWidth可选。允许的最大文本宽度，

案例一：

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
    <canvas id="cont" width="500px" height="500px"></canvas>
    <script>
        var canvas = document.querySelector("#cont");
        var ctx = canvas.getContext("2d");

        
        // 1.设置字体样式
        // font
        ctx.font = '30px 微软雅黑';
        //字体颜色
        ctx.fillStyle = 'gold'
        // 2.画文字
        ctx.fillText('实心文字', 250, 250)

        //  空心文字
        ctx.strokeStyle = 'red'
        ctx.strokeText('空心文字', 0, 250)

        //  未设置最大宽度
        ctx.fillStyle = 'red'
        ctx.fillText('你好！我是未设置最大宽度的字体', 100, 50)
        //  设置最大宽度
        ctx.fillStyle = 'green'
        ctx.fillText('你好！我设置最大宽度的字体', 100, 100, 300)
        
    </script>
</body>
</html>

效果：

2、文字渐变

语法：

var gradient = ctx.createLinearGradient(x0, y0, x1, y1)

 参数：

x0渐变开始点的 x 坐标
y0渐变开始点的 y 坐标
x1渐变结束点的 x 坐标
y1渐变结束点的 y 坐标

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        canvas {
            display: block;
            margin: 0 auto;
            border: 1px solid #aaa;
        }
    </style> 
</head>
<body>
    <canvas id="cont" width="500px" height="500px"></canvas>
    <script>
        var canvas = document.querySelector("#cont");
        var ctx = canvas.getContext("2d");

        
        ctx.font = '50px 微软雅黑';
        /**
         * 设置线性渐变
        */
        var gradient = ctx.createLinearGradient(0, 0, canvas.width, 0)
        gradient.addColorStop('0', "yellow")
        gradient.addColorStop('0.5', 'blue')
        gradient.addColorStop('1.0', 'red')

        
        ctx.fillStyle = gradient
        ctx.fillText('今天天气不错， 风和日丽！', 0, 100, 500)
        ctx.strokeStyle = gradient
        ctx.strokeText('适合出去玩儿！happy~', 0, 300, 500)
        
    </script>
</body>
</html>

 效果：

 3、文字位置

语法：

textAlign = 'start' | 'end' | 'left' | 'right' | 'center'   // 水平方向
textBaseLine = 'top' | 'bottom' | 'moddle' | 'alphabetic' | 'hanging'

像素点

语法： 

ctx.getImageData(x, y, width, height)

参数：

x开始复制的左上角位置的 x 坐标
y开始复制的左上角位置的 y 坐标
width将要复制的矩形区域的宽度
height将要复制的矩形区域的高度

介绍：

返回的getImageData对象，该对象拷贝了画布指定矩形的像素数据

对于getImageData对象中的每个像素，都存在着四方面的信息， 即RGBA值

R - 红色 (0 - 255)  

G - 绿色 (0 - 255)  

B - 蓝色 (0 - 255)  

A - alpha 通道 (0 - 255) ； 0： 透明； 255：完全不透明

color / alpha 以数组的形式存在，并存储于getImage对象的data属性中   

案例：

<!DOCTYPE html>
<html lang="en">
<head> 
</head>
<body>
    <canvas id="cont" width="500px" height="500px"></canvas>
    <script>
        var canvas = document.querySelector("#cont");
        var ctx = canvas.getContext("2d");
        // 1 创建图片
        var img = new Image();
        img.src = 'u10.png'
        img.onload = function() {
            // 2 绘制图片
            ctx.drawImage(img, 0, 0, img.width, img.height)
            // 3 获取像素点
            var copy = ctx.getImageData(0, 0, 10, 10);
            console.log('像素数据', copy);
        }
    </script>
</body>
</html>

打印：

 

把像素点放到画布上

语法：

putImageData(imgData, x, y, dirtyX, dirtyY, dirtyWidth, dirtyHeight)

参数：

imgData规定要放回画布的ImageData对象
xImageData对象左上角的 x 坐标，以像素计
y ImageData对象左上角的 y 坐标，以像素计
dirtyX可选。 水平值(x)， 在画布上放置图片的位置
dirtyY可选。 水平值(y)， 在画布上放置图片的位置
dirtyWidth可选。 在画布上绘制图像所使用的宽度
dirtyHeight可选。 在画布上绘制图像所使用的高度

案例：

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
    <canvas id="cont" width="500px" height="500px"></canvas>
    <script>
        var canvas = document.querySelector("#cont");
        var ctx = canvas.getContext("2d");
        // 1 创建图片
        var img = new Image();
        img.src = 'u10.png'
        img.onload = function() {
            // 2 绘制图片
            ctx.drawImage(img, 0, 0, 250, 250)
            // 3 获取像素点
            var copy1 = ctx.getImageData(0, 0, 100, 100);
            
            ctx.putImageData(copy1, 0, 350)
        }
    </script>
</body>
</html>

效果：

 

郑建零零发
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Canvas操作（隐藏）
qq_34754747的博客
05-20 221
display:none
nodejs安装
qxdPx的博客
06-13 248
1、在官网下载压缩包 2、# tar xf node-v10.9.0-linux-x64.tar.xz // 解压 3、# cd node-v10.9.0-linux-x64/ // 进入解压目录 4、# ./bin/node -v // 执行node命令 查看版本 v10.9.0 5、ln...
Canvas
flqbestboy的专栏
09-28 403
canvas 是行内元素而不是块元素 创建元素
自定义边框的制作与换色（canvas与css3）
xin5732的博客
05-28 2130
自定义边框的实现。
canvas点击事件
徐同保的专栏
09-26 4947
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;canvas点击事件&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;canvas id=&quo
canvas绘制基础讲解
LYM0411的博客
06-25 421
canvas详细讲解及案例
canvas基础
xiaozhuo_tang的博客
01-24 207
Canvas基础 canvas在HTML中的代码 "myCanvas" width="300" height="300"> //writing some words here while broswer do not support canvas. //or some "" alt="" /> is cool too. canvas核心API 渲染上下文getContext
canvas基础总结文档，简要讲解参数
最新发布
10-31
需要做一个装饰绘制一个自己的一个装饰板，第一次了解的对于canvas的一些讲解后面方便下一次记不清楚的时候快速开发一个图
画布Canvas基础知识讲解
03-25
画布Canvas基础知识讲解 HTML5 规范引进了很多新特性，其中最令人期待的之一就是 Canvas 元素。HTML5 Canvas 提供了通过 JavaScript 绘制图形的方法，此方法使用简单但功能强大。每一个 Canvas 元素都有一个“上...
canvas基础代码教程
03-19
这个"canvas基础代码教程"包含了一系列HTML页面，每个页面都可能是对Canvas使用的一个实例或者一个具体知识点的讲解。 首先，我们可以从文件名中推测教程的结构。13.html、15.html、18.html、07.html、22.html、09....
canvas实现涂鸦效果
02-28
1. **Canvas API基础**： - `canvas`元素：HTML5中的`<canvas>`标签用于在网页上绘制2D图形，通过JavaScript控制。 - `getContext()`：获取`canvas`的2D渲染上下文，例如`var ctx = canvas.getContext('2d');`，这...
HTML5 Canvas基础教程
01-30
HTML5 Canvas基础教程会深入讲解这些概念，并通过实例代码演示如何实现各种绘图效果。通过学习，开发者可以创建动态图表、游戏、数据可视化应用，甚至是完整的2D渲染引擎。无论是初学者还是有经验的开发者，都能从中...
java todataurl_canvas.toDataURL()报错的解决方案全都在这了
weixin_34666478的博客
02-27 782
报错详尽信息Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.关键词canvas.toDataURL()crossOriginAccess-Control-Allow-Origin前言最近在做一个创意类的图片合成工具，大概...
判断canvas是否有内容（浙政钉小程序）
WMW_wmw的博客
07-04 1456
canvas画布是否有内容
Canvas画布(笔记)新手必看懂
qq_180494790的博客
10-28 1205
HTML5中提供了标签，使用标签在网页中创建一个矩形区域的画布。HTML5 的canvas元素使用在网页上绘制图像。画布是一个矩形区域， 你可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
设置canvas画布大小
热门推荐
qq_17627195的博客
01-12 1万+
canvas的绘制是以画布大小为准的。 canvas的默认画布大小为300×150。 设置canvas画布大小的方法： // 方法一 <canvas id="test" width="100px" height="100px"></canvas> //方法二：通过js实现 <canvas id="test"></canvas> <script> var canvas = document.getElementById('test'); can
h5新增标签:canvas(行内块元素)
weixin_33850015的博客
03-08 998
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...
Canvas的基本用法
zheng_jia_jun的博客
08-10 658
canvas 标签有属性 width,height 来分别设置他们的宽高，不设置的话，标签默认宽度为 300px,高度为 150px, 请勿使用 css 直接定义 canvas 的宽度，这样会导致用 canvas 绘画出来的图像变形。是一个可以使用脚本 (通常为JavaScript) 来绘制图形的 HTML 元素，例如，它可以用于绘制图表、制作图片构图或者制作简单的 (以及不那么简单的) 动画。上面的脚本中包含一个叫做 draw() 的函数，当页面加载结束的时候就会执行这个函数。...
HTML5Canvas基础教程：绘图入门
“html5canvas教程，讲解HTML5 Canvas的基础绘图功能，包括画直线、路径、图形、渐变、模式、图像和文本。适合初学者，需要具备一定的JavaScript基础和现代浏览器支持。” HTML5 Canvas 是一种强大的Web开发技术，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值