Canvas学习笔记——Canvas基础用法

最新推荐文章于 2022-08-31 08:56:06 发布
最新推荐文章于 2022-08-31 08:56:06 发布
阅读量462 收藏
点赞数
分类专栏： 前端 文章标签： canvas js html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Hoshizola/article/details/119669648
版权
本文详细介绍了HTML5 Canvas的基础用法，包括绘制矩形、路径、曲线、变形、图片、渐变、文字、阴影以及像素操作。通过实例展示了如何使用Canvas API创建各种图形和效果，并提供了相关资源链接深入学习。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

Canvas是HTML5中的新增API，提供了一个通过Javascript和HTML的<canvas>元素来绘制图形。Canvas API主要聚焦于2D图形。<canvas>与一般标签一样可以设置宽高，建议在标签内设置宽高，而不要用css设置。canvas画布就是一张图片，可以以图片形式保存。

用法

1.绘制矩形

常用方法：

  • strokeRect()：以路径方式绘制矩形
  • fillRect()：以填充方式绘制矩形
  • clearRect()：清除矩形
    三个方法都有四个参数，都表示为起点横坐标，起点纵坐标，矩形宽，矩形高
<script>
    window.onload = function(){
    	  // 获取画板
        let canvas = document.getElementById('can')
        if(canvas.getContext){ 
            // 获取绘制对象
            let ctx = canvas.getContext('2d')
            // 设置矩形边框颜色
            ctx.strokeStyle = 'green'
            // 设置边框的宽度
            ctx.lineWidth = 5 
            // 设置连接处的样式
            ctx.lineJoin = 'round' // miter--直角，round---圆角，bevel---三角
            // 绘制矩形
            ctx.strokeRect(10, 10, 200, 100)
        }
    }
</script>
<body> 
    <canvas id="can" width="450px" height="450px"></canvas>
</body>

结果：
![在这里插入图片描述](https://img-blog.csdnimg.cn/07dd765cf27e4829bc372e1935187d0a.pn

<script>
    window.onload = function(){
    	  // 获取画板
        let canvas = document.getElementById('can')
        if(canvas.getContext){ 
            // 获取绘制对象
            let ctx = canvas.getContext('2d')
            // 设置填充颜色
            ctx.fillStyle = 'pink'
            // 绘制矩形
            ctx.fillRect(10, 150, 200, 100)
        }
    }
</script>
<body> 
    <canvas id="can" width="450px" height="450px"></canvas>
</body>

结果：
在这里插入图片描述

2. 绘制路径
  • moveTo()：接收两个参数，分别是点的横坐标和纵坐标，从起始点开始绘制
  • lineTo()：接收两个参数，表示横坐标和纵坐标，从起点到该点绘制直线
<script>
    /*
        使用canvas绘制图形，一旦绘制成功，canvas就像素化了它们，也就是说无法再从画布上得到这个图形，从而无法再次修改图形，这就是canvas比较轻量的原因。flash重的原因之一是它可以通过对应的api得到已经在画布上的图形。
    */
    window.onload = function(){
        var canvas = document.getElementById('can')
        //获取canvas上下文
        var ctx = canvas.getContext('2d')
        //在画布上绘画
        ctx.moveTo(100, 100)
        ctx.lineTo(200, 100)
        ctx.lineTo(200, 200)
        ctx.closePath() //闭合路径
        ctx.strokeStyle = 'blue'
        ctx.lineWidth = 10
        ctx.stroke()
        //填充
        ctx.fillStyle = 'green'
        ctx.fill()
    }
</script>
<body>
    <canvas id="can" width="600" height="600"></canvas>
</body>

结果
在这里插入图片描述

  • beginPath()：当设置完绘制参数后，再绘制第二个图形，会使用设置在第一个图形上的参数。为了使两个图形之间的参数互不影响，在绘制图形前使用该方法。Javascript代码如下：
var canvas = document.getElementById('can')
//获取canvas上下文
var ctx = canvas.getContext('2d')
//在画布上绘画
ctx.moveTo(100, 100)
ctx.lineTo(200, 100)
ctx.lineTo(200, 200)
ctx.closePath() //闭合路径
ctx.strokeStyle = 'blue'
ctx.lineWidth = 10
ctx.stroke()
//填充
ctx.fillStyle = 'green'
ctx.fill()

ctx.beginPath()
ctx.moveTo(250, 100)
ctx.lineTo(250, 200)
ctx.lineTo(350, 200)
ctx.closePath()
ctx.strokeStyle = 'orange'
ctx.lineWidth = 5 
ctx.stroke()
ctx.fillStyle = 'pink'
ctx.fill()

效果
在这里插入图片描述

  • 线段两端效果
<script>
    window.onload = function(){
        var canvas = document.getElementById('can')
        //获取canvas上下文
        var ctx = canvas.getContext('2d')
        ctx.moveTo(100, 250)
        ctx.lineTo(250, 250)
        ctx.lineWidth = 5 
        ctx.strokeStyle = 'blue'
        ctx.lineCap = 'round' // square--方形，比原来线段长，round--圆形，butt--默认，方形，长度不变
        ctx.stroke()
    }
</script>

结果
在这里插入图片描述

  • save()可以保存之前设置的样式，在save()后设置了新的样式后再使用restore()可以恢复
3. 绘制曲线
  • arc()：接收6个参数，分别为：圆心横坐标，圆心纵坐标，半径，开始角度，结束角度，绘制方向（true为逆时针，false为顺时针）。其中角度参数指的是弧度，弧度与角度的换算关系：弧度 = 角度*Math.PI/180。

弧线

<script>
   window.onload = function(){
       let canvas = document.getElementById('can')
       let ctx = canvas.getContext('2d')
       ctx.beginPath()
       ctx.arc(200, 200, 100, 0, 1.5*Math.PI, false)
       ctx.strokeStyle = 'red'
       ctx.stroke()
				// 扇形
			ctx.beginPath()
        ctx.moveTo(250, 100)
        ctx.arc(250, 100, 100, 0, 0.25*Math.PI, false)
        ctx.strokeStyle = 'green'
        ctx.closePath()
        ctx.stroke()
    }
</script>
<body>
    <canvas id="can" width="400" height="400"></canvas>
</body>

结果
在这里插入图片描述

4. 变形

移动画板起点

<script>
window.onload = function() {
  let canvas = document.getElementById('can')
  if(canvas.getContext) {
    let ctx = canvas.getContext('2d')
    // 移动画板的起点到(100,100)
    ctx.translate(100, 100)
    // 根据移动后的起点画矩形
    ctx.strokeRect(0, 0, 100, 100)
  }
}
</script>
<body>
  <canvas id="can" width="500px" height="500px" style="background-color: antiquewhite;"></canvas>
</body>

效果 在这里插入图片描述

translate多次使用时会累加，如果两次执行ctx.translate(100,100)，那么起点就是(200,200)

旋转坐标轴

<script>
window.onload = function() {
  let canvas = document.getElementById('can')
  if(canvas.getContext) {
    let ctx = canvas.getContext('2d')
    // 移动画板的起点到(100,100)
    ctx.translate(100, 100)
    // 顺时针旋转画板的坐标轴
    ctx.rotate(45*Math.PI/180)
    // 根据移动后的起点画矩形
    ctx.strokeRect(50, 50, 100, 100)
  }
}
</script>
<body>
  <canvas id="can" width="500px" height="500px" style="background-color: antiquewhite;"></canvas>
</body>

效果
在这里插入图片描述
缩放

<script>
    window.onload = function() {
      let canvas = document.getElementById('can')
      if(canvas.getContext) {
        let ctx = canvas.getContext('2d')
        // 横坐标缩放两倍，整体像素会放大两倍，纵轴方向不受影响
        ctx.scale(2,1)
        ctx.strokeRect(50, 50, 100, 100)
      }
    }
</script>
<body>
  <canvas id="can" width="500px" height="500px" style="background-color: antiquewhite;"></canvas>
</body>

效果
在这里插入图片描述

5. 绘制图片
  • drawImage()：接收五个参数，分别为图片对象，起点横坐标，起点纵坐标，图片宽度，图片高度
<script>
    window.onload = function(){
        let canvas = document.getElementById('can')
        canvas.style.border = '3px solid black'
        let ctx = canvas.getContext('2d')
        //创建一个image元素
        let image = new Image()
        //用src设置图片地址
        image.src = 'imgs/p3.jpg'
        //必须在onload之后再进行绘制
        image.onload = function(){
            ctx.drawImage(image, 50, 50, 400, 240)
        }
    }
</script>
<body>
    <canvas id="can" width="600" height="400"></canvas>
</body>

效果
在这里插入图片描述
使用图片填充矩形

<script>
    window.onload = function(){
        let canvas = document.getElementById('can')
        canvas.style.border = '3px solid black'
        let ctx = canvas.getContext('2d')
        //创建一个image元素
        let image = new Image()
        //用src设置图片地址
        image.src = 'imgs/miao.jpg'
        //必须在onload之后再进行绘制
        image.onload = function(){
            let pattern = ctx.createPattern(image, 'repeat')
            ctx.fillStyle = pattern
            ctx.fillRect(0,0,1200, 900)
        }
    }
</script>
<body>
    <canvas id="can" width="1200" height="900"></canvas>
</body>

效果
在这里插入图片描述

6.渐变
  • createLinearGradient()：线性渐变，接收四个参数，分别为起点横坐标，起点纵坐标，终点横坐标，终点纵坐标
  • createRadialGradient()：径向渐变，接收六个参数，分别为起点圆心横坐标，起点圆心纵坐标，终点圆心横坐标，终点圆心纵坐标
<script>
    window.onload = function () {
        let canvas = document.getElementById('can')
        canvas.style.border = '1px solid black'
        let ctx = canvas.getContext('2d')
        // 线性渐变
        let linear = ctx.createLinearGradient(10, 10, 200, 80)
        linear.addColorStop(0, 'yellow')
        linear.addColorStop(0.5, 'green')
        linear.addColorStop(1, 'red')
        ctx.fillStyle = linear
        ctx.fillRect(10, 10, 200, 80)

        // 径向渐变
        let radial = ctx.createRadialGradient(180, 180, 10, 180, 180, 70)
        radial.addColorStop(0, 'yellow')
        // radial.addColorStop(0.25, 'purple')
        radial.addColorStop(0.5, 'green')
        // radial.addColorStop(0.75, 'blue')
        radial.addColorStop(1, 'red')
        ctx.fillStyle = radial
        ctx.fillRect(120, 120, 120, 120)
    }
</script>
</head>
<body>
    <canvas id="can" width="400" height="400" style="background-color: bisque;"></canvas>
</body>

效果
在这里插入图片描述

7.绘制文字
  • strokeText()：绘制空心文字
  • fillText()：绘制实心文字
<script>
    window.onload = function(){
        let canvas = document.getElementById('can')
        canvas.style.border = '1px solid black'
        let ctx = canvas.getContext('2d')
        ctx.fillStyle = 'red'
        ctx.strokeStyle = 'green'
        //canvas上所有内容都是图片，包括文字
        ctx.font = '40px sans-serif'
        ctx.strokeText('好开心哦',100,100)
        ctx.fillText('好开心哦', 100, 180)
    }
</script>
<body>
    <canvas id="can" width="400" height="250" style="background-color: bisque;"></canvas>
</body>

效果
在这里插入图片描述
文字对齐方式——居中，以起点为中心点

<script>
    window.onload = function(){
        let canvas = document.getElementById('can')
        canvas.style.border = '1px solid black'
        let ctx = canvas.getContext('2d')
        ctx.fillStyle = 'red'
        ctx.strokeStyle = 'green'
        ctx.font = '40px sans-serif'
        // 以起点为中心点
        ctx.textAlign = 'center'
        ctx.strokeText('好开心哦',100,100)
        ctx.fillText('好开心哦', 100, 180)

        // 参考线
        ctx.save()
        ctx.beginPath();
        ctx.moveTo(100, 0)
        ctx.lineTo(100, 250)
        ctx.strokeStyle = 'blue'
        ctx.stroke()
        ctx.restore()
    }
</script>

效果
在这里插入图片描述将ctx.textAlign的值改为right
在这里插入图片描述

8. 绘制阴影
<script>
    window.onload = function(){
        let canvas = document.getElementById('can')
        canvas.style.border = '1px solid black'
        let ctx = canvas.getContext('2d')
        // 横向偏移量，正数向右偏移
        ctx.shadowOffsetX = 8
        // 纵向偏移量，正数向下偏移
        ctx.shadowOffsetY = 8
        // 模糊度
        ctx.shadowBlur = 5
        // 阴影颜色
        ctx.shadowColor = 'blue'
        ctx.font = '50px 宋体'
        ctx.fillText('你好啊', 100, 100)
        ctx.fillText('好开心呀', 100, 200)
    }
</script>
</head>
<body>
    <canvas id="can" width="400" height="300" style="background-color: cornsilk;"></canvas>
</body>

效果
在这里插入图片描述

9. 像素操作

通过操作像素值来设置画布颜色

<script>
  window.onload = function() {
    let canvas = document.getElementById('can')
    if(canvas.getContext) {
      let ctx = canvas.getContext('2d')
      // 获取整个画布的像素数据
      let imageData = ctx.getImageData(0, 0, canvas.width, canvas.height)
      // 每个像素点包含了4个值：r-g-b-a，每个值都在0-255之间
      // 打印imageData数据可知，每个数据都是0，因为此时画布透明
      console.log(imageData.data.length)
      // 可以通过操作r-g-b-a的值来操作像素点，进而操作画布的颜色
      for(let i = 0; i < imageData.data.length/4; i++) {
        // 4*i 第i个像素点的第一个值——r
        imageData.data[4*i] = 255
        // 4*i+1 第i个像素点的第二个值——g
        imageData.data[4*i+1] = 255
        // 4*i+2 第i个像素点的第三个值——b
        imageData.data[4*i+2] = 0
        // 4*i+3 第i个像素点的第四个值——a
        imageData.data[4*i+3] = 255
      }
      // 重新设置像素
      ctx.putImageData(imageData, 0, 0)
    }
  }
</script>
<body>
  <canvas id="can" width="300px" height="250px" style="background-color: cornsilk;"></canvas>
</body>

通过操作像素点将其设为(255,255,0,255)，可将画布颜色设置为黄色：
在这里插入图片描述
获取单个像素点的值

<script>
    window.onload = function() {
      let canvas = document.getElementById('can')
      if(canvas.getContext) {
        let ctx = canvas.getContext('2d')
        // 绘制一个填充矩形
        ctx.save()
        ctx.fillStyle = 'green'
        ctx.fillRect(50, 50, 150, 100)
        ctx.restore()

        // 根据坐标，获取这个坐标的像素点的信息
        // 先获取整个画布的像素点
        let imageData = ctx.getImageData(0, 0, canvas.width, canvas.height)
        // 获取坐标的颜色值
        let color = getPxColor(imageData, 100, 100)
        console.log(color) // [0, 128, 0, 255]
      }
      // 获取坐标像素点数据的方法
      function getPxColor(imageData, x, y) {
        // 一个像素点颜色由4个值组成
        let color = []
        let width = imageData.width
        color[0] = imageData.data[(y*width+x)*4]
        color[1] = imageData.data[(y*width+x)*4+1]
        color[2] = imageData.data[(y*width+x)*4+2]
        color[3] = imageData.data[(y*width+x)*4+3]
        return color
      }
    }
</script>
<body>
  <canvas id="can" width="400px" height="300px" style="background-color: cornsilk;"></canvas>
</body>

设置单个像素点的值

<script>
    window.onload = function() {
      let canvas = document.getElementById('can')
      if(canvas.getContext) {
        let ctx = canvas.getContext('2d')
        // 绘制矩形
        ctx.save()
        ctx.fillStyle = 'green'
        ctx.fillRect(50, 50, 150, 100)
        ctx.restore()
        // 获取画布全部像素数据
        let imageData = ctx.getImageData(0, 0, canvas.width, canvas.height)
        // 改变一行像素的颜色
        for(let i = 0; i < imageData.width; i++) {
          setPxColor(imageData, i, 30, [199,21,133,255])
        }
        ctx.putImageData(imageData, 0, 0)
      }

      // 设置某个坐标的像素值
      function setPxColor(imageData, x, y, color) {
        let width = imageData.width
        imageData.data[(y*width+x)*4] = color[0]
        imageData.data[(y*width+x)*4+1] = color[1]
        imageData.data[(y*width+x)*4+2] = color[2]
        imageData.data[(y*width+x)*4+3] = color[3]
      }
    }
  </script>
</head>
<body>
  <canvas id="can" width="400px" height="300px" style="background-color: cornsilk;"></canvas>
</body>

效果
在这里插入图片描述
关于canvas更多内容可以查看：https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial。

canvas的学习笔记
weixin_45376741的博客
11-10 502
canvas的学习笔记（一） 引言： 因为是在vue中写的，默认为vue的写法。 一.获取canvas的dom并生成2d的渲染上下文 <template> <div class="content-box"> <!-- canvas标签的属性只有width和height --> <canvas id="canvasDemo" width="500" height="500" style="borde
Canvas学习笔记——马赛克案例
Hoshizola的博客
08-15 443
这篇文章要讲的是如何将一张照片变成马赛克的照片，利用Canvas中操作像素的方法可实现。马赛克的原理无非就是视觉上把原来的像素大小放大，将若干个小像素组成一个块变成大像素，比如可以将5*5的像素当作一个块，在这个块中随机选择一个像素的颜色作为整个块的颜色即可。实现代码如下： <!DOCTYPE html> <html lang="en"> <head> <script> window.onload = function() { let
canvas学习
11-22
内含canvas基本语法，是学习canvas的笔记。。。。。。。。
Canvas学习笔记[持续更新]
测试
03-05 246
Canvas clipOutPath(Path path),clipOutRect() 裁剪掉指定的path部分,对两个部分做减法(difference) protected void onDraw(Canvas canvas) { super.onDraw(canvas); Paint paint = new Paint(); ...
canvas学习笔记（一）
weixin_41786576的博客
03-24 366
canvas 是 HTML5 新增的元素，可用于通过使用JavaScript中的脚本来绘制图形。例如，它可以用于绘制图形，制作照片，创建动画，甚至可以进行实时视频处理或渲染。 <canvas width="600" height="400" id="canvas"></canvas> 注意: 如果你绘制出来的图像是扭曲的, 尝试用width和height属性为<can...
canvas 学习笔记
ASIYAas的博客
07-14 306
canvas 学习笔记
Android学习笔记——Canvas & clipRect
03-29
这篇学习笔记将深入探讨这两个概念及其在实际应用中的使用。 首先，Canvas可以理解为画布，它是Android系统提供的用于在屏幕上绘制图形的对象。在Android中，我们可以通过Canvas来绘制各种形状，如线条、矩形、圆、...
前端可视化学习笔记——使用Canvas绘制一棵二叉树
qq_38740195的博客
03-10 1116
使用Canvas绘制一棵二叉树
学习笔记——使用canvas给图形填色
layuecr的博客
09-19 4393
看到canvas的章节，想到可以用它来画个图。然后选了幅由简单线条组成的卡通火箭图，准备动手画。画的过程中遇到了些问题，这里整理一下。下面是找来的图：         没上色前，还感觉不出什么问题。就是使用lineTo画直线，quadraticCurveTo画曲线。附个没上色的图：         到上色了，就遇到问题了：一个颜色怎么覆盖到另外一个颜色上面去？
HTML5 Canvas学习笔记(9)俄罗斯方块游戏之三（游戏面板）
08-06
这篇“HTML5 Canvas学习笔记(9)俄罗斯方块游戏之三（游戏面板）”深入探讨了如何利用Canvas技术构建一个经典的游戏——俄罗斯方块。 在HTML5 Canvas上构建俄罗斯方块游戏，首先需要理解Canvas的基本结构和绘图API。...
canvas学习笔记
weixin_44164945的博客
08-31 368
canvas学习笔记
Canvas学习笔记1
weixin_44679078的博客
10-07 240
描述： HTML5的canvas标签用于绘制图像（通过脚本，通常是JavaScript）。 不过，canvas元素本身没有绘制能力（它仅仅是图形的容器），必须使用脚本来完成实际的绘制任务。 getContext（）方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。 提供完整的getContext(“2d”)对象的属性和方法，可用于在画布上绘制文本、线条、矩形、圆形等等。 canvas三要素：id、width、height（这里的宽高跟style是有区别的） 正常情况下，放在canvas标签内部的
Canvas基础学习笔记（一）
我有明珠一颗的博客
01-29 274
基础绘图 （笔记摘自菜鸟教程 http://www.runoob.com/html/html5-canvas.html） 1、getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。 2、设置fillStyle属性可以是CSS颜色，渐变，或图案。fillStyle 默认设置是#000000（黑色）。 3、fillRect(x,y...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值