canvas基础

最新推荐文章于 2023-03-02 19:08:31 发布
最新推荐文章于 2023-03-02 19:08:31 发布
阅读量308 收藏 2
点赞数
分类专栏： canvas 文章标签： javascript html css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40864647/article/details/124946948
版权
canvas基础
一、canvas是什么
  • 广义：H5新增canvas 2d绘图功能
  • 在html中：
    • canvas是html标签
    • 需要用js在canvas里绘制图形
    • canvas可以理解为一张画布
二、绘制基本图形
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas绘图</title>
    <style>
        #canvas{
            background: blue;
        }
    </style>
</head>
<body>
    <!-- 设置canvas宽高需要直接设置,而不是css -->
    <canvas id="canvas" width="400" height="300">
        <!-- 不兼容就会显示的内容 -->
        <p>不兼容</p>
    </canvas>
    <script>
        // 获取到canvas元素
        const canvas = document.getElementById('canvas')
        // 或者通过js来设置宽高
        // canvas.width = 300
        // canvas.height = 300
        // canvas上下文对象
        const ctx = canvas.getContext('2d')
        // 颜色
        ctx.fillStyle = 'red'
        // 绘制一个长方形
        ctx.fillRect(50, 50, 200, 100)
    </script>
</body>
</html>

如下图，就得到了一个简单的红色的长方形了。
在这里插入图片描述

三、绘制路径

  1. 开始建立路径：beginPath()
  2. 向路径集合中添加子路径
  3. 显示路径：填充fill()，描边stroke()

子路径的形状：

  • 直线：lineTo(x,y)
ctx.beginPath()
ctx.moveTo(50, 50)
ctx.lineTo(400, 50)
ctx.lineTo(400, 300)
ctx.stroke()

在这里插入图片描述

  • 圆弧：arc(x, y, 半径, 开始弧度, 结束弧度, 方向)
    在这里插入图片描述
ctx.beginPath()
ctx.arc(300, 300, 100, 0, Math.PI * 3 / 2)
ctx.stroke()

在这里插入图片描述

  • 切线圆弧：arcTo(x1, y1, x2, y2, 半径)
    在这里插入图片描述
ctx.beginPath()
ctx.moveTo(50, 50)
ctx.arcTo(400, 50, 400, 300, 100)
ctx.stroke()

在这里插入图片描述

  • 二次贝塞尔曲线：quadraticCurverTo(cpx1, cpy1, x, y)
    在这里插入图片描述
ctx.beginPath()
ctx.moveTo(50, 50)
ctx.quadraticCurveTo(400, 50, 400, 300)
ctx.stroke()

在这里插入图片描述

  • 三次贝塞尔曲线：bezierCurverTo(cpx1, cpy1, cpx2, cpy2, x, y)
    在这里插入图片描述
ctx.beginPath()
ctx.moveTo(50, 50)
ctx.bezierCurveTo(400, 50, 400, 300, 600, 300)
ctx.stroke()

在这里插入图片描述

  • 矩形：rect(x, y, w, h)
ctx.beginPath()
ctx.rect(50, 50, 400, 200)
ctx.fill()

在这里插入图片描述

  • closePath
ctx.beginPath()
ctx.arc(300,300,100,0,Math.PI*3/2)
// 封闭路径，只对stroke有效
ctx.closePath()
ctx.stroke()

在这里插入图片描述

四、图形样式
4.1 纯色
  • strokeStyle 代表了描边样式，描边区域的绘制方法是 stroke()、strokeRect() 或者strokeText()
ctx.beginPath()
ctx.arc(300, 300, 100, 0, Math.PI*2)
ctx.strokeStyle = 'rgba(255,0, 0, 0.5)'
ctx.stroke()

在这里插入图片描述

  • fillStyle 代表了填充样式，填充区域的绘制方法是 fill()、fillRect() 或者fillText()
ctx.beginPath()
ctx.arc(300, 200, 100, 0, Math.PI * 2)
// 可以是以下各种方式设置颜色
// ctx.fillStyle ='red'
// ctx.fillStyle ='#345fff'
// ctx.fillStyl e='rgb(255,0, 0)'
ctx.fillStyle = 'rgba(255,0, 0, 0.5)'
ctx.fill()

在这里插入图片描述

4.2 渐变
  1. 建立渐变对象
    线性渐变 gradient=createLinearGradient(x1, y1, x2, y2)
    径向渐变 gradient=createRadialGradient(x1, y1, r1, x2, y2, r2)
  2. 定义渐变的颜色节点
    gradient.addColorStop(position, color)
  3. 赋值
    ctx.fillStyle= gradient
    ctx.strokeStyle= gradient
  • 线性渐变
const canvas = document.getElementById('canvas')
canvas.width = window.innerWidth
canvas.height = window.innerHeight
const ctx = canvas.getContext('2d')

// 1.建立渐变对象，定义渐变的区域
const gr = ctx.createLinearGradient(50, 50, 400, 400)

// 2.为渐变添加颜色节点
gr.addColorStop(0, 'red')
gr.addColorStop(0.5, 'yellow')
gr.addColorStop(1, 'blue')

// 3.为样式赋值
ctx.fillStyle = gr

// 4.绘图
ctx.fillRect(50, 50, 350, 350)

在这里插入图片描述

  • 径向渐变
const canvas = document.getElementById('canvas')
canvas.width = window.innerWidth
canvas.height = window.innerHeight
const ctx = canvas.getContext('2d')

// 1.建立渐变对象，定义渐变的区域
const gr=ctx.createRadialGradient(200, 200, 50, 300, 300, 200)

// 2.为渐变添加颜色节点
gr.addColorStop(0, 'red')
gr.addColorStop(0.5, 'yellow')
gr.addColorStop(1, 'blue')

// 3.为样式赋值
ctx.fillStyle = gr


// 4.绘图
ctx.fillRect(50, 50, 350, 350)

在这里插入图片描述

4.3 纹理
const canvas = document.getElementById('canvas')
canvas.width = window.innerWidth
canvas.height = window.innerHeight
const ctx = canvas.getContext('2d')

// 1.建立图像源
// 图像元素：<img>
// 视频元素：<video>
// canvas：<canvas>
const img = new Image()
img.src = 'https://img2.baidu.com/it/u=1369006479,3394350709&fm=253&fmt=auto&app=138&f=JPEG?w=1047&h=500'
img.onload = loadedFn
function loadedFn () {
    // 2.建立纹理对象，定义重复方式
    const pt = ctx.createPattern(img, 'no-repeat')
    // 3.为样式赋值
    ctx.fillStyle = pt
    // 4.绘图
    ctx.fillRect(0, 0, 400, 400)
}

在这里插入图片描述

五、描边样式

  • lineWidth
    lineWidth 定义描边的宽度，它是从路径的中心开始绘制的，内外各占宽度的一半

  • lineCap 线条端点样式

const canvas = document.getElementById('canvas')
canvas.width = window.innerWidth
canvas.height = window.innerHeight
const ctx = canvas.getContext('2d')


// 描边的着色样式
ctx.strokeStyle = 'maroon'
// lineWidth：描边宽
ctx.lineWidth = 40
// lineCap 描边端点样式
ctx.save()
ctx.beginPath()
ctx.moveTo(50, 50)
ctx.lineTo(400, 50)
ctx.lineCap = 'butt'
ctx.stroke()
ctx.restore()

ctx.save()
ctx.beginPath()
ctx.moveTo(50, 150)
ctx.lineTo(400, 150)
ctx.lineCap = 'round'
ctx.stroke()
ctx.restore()

ctx.save()
ctx.beginPath()
ctx.moveTo(50, 250)
ctx.lineTo(400, 250)
ctx.lineCap = 'square'
ctx.stroke()
ctx.restore()

在这里插入图片描述

  • lineJoin拐角样式
const canvas = document.getElementById('canvas')
canvas.width = window.innerWidth
canvas.height = window.innerHeight
const ctx = canvas.getContext('2d')

// 描边的着色样式
ctx.strokeStyle = 'maroon'
// lineWidth：描边宽
ctx.lineWidth = 20

/*lineJoin 拐角类型
* miter
* round
* bevel
* */
ctx.save()
ctx.beginPath()
ctx.moveTo(50, 20)
ctx.lineTo(400, 20)
ctx.lineTo(200, 100)
ctx.lineJoin = 'miter'
ctx.stroke()
ctx.restore()

ctx.save()
ctx.beginPath()
ctx.moveTo(50, 150)
ctx.lineTo(400, 150)
ctx.lineTo(200, 240)
ctx.lineJoin = 'round'
ctx.stroke()
ctx.restore()

ctx.save()
ctx.beginPath()
ctx.moveTo(50, 300)
ctx.lineTo(400, 300)
ctx.lineTo(200, 380)
ctx.lineJoin = 'bevel'
ctx.stroke()
ctx.restore()

在这里插入图片描述

  • miterLimit 拐角类型
const canvas = document.getElementById('canvas')
canvas.width = window.innerWidth
canvas.height = window.innerHeight
const ctx = canvas.getContext('2d')
// 描边的着色样式
ctx.strokeStyle = 'maroon'
// lineWidth：描边宽
ctx.lineWidth = 40

// miterLimit 拐角类型，number 类型，如1,2,3
ctx.save()
ctx.beginPath()
ctx.moveTo(50,50)
ctx.lineTo(400,50)
ctx.lineTo(200,150)
ctx.stroke()
ctx.restore()

ctx.save()
ctx.beginPath()
ctx.moveTo(50, 200)
ctx.lineTo(400, 200)
ctx.lineTo(200, 280)
ctx.miterLimit = 2
ctx.stroke()
ctx.restore()

在这里插入图片描述

  • etLineDash虚线
const canvas = document.getElementById('canvas')
canvas.width = window.innerWidth
canvas.height = window.innerHeight
const ctx = canvas.getContext('2d')
// 描边的着色样式
ctx.strokeStyle = 'maroon'
// lineWidth：描边宽
ctx.lineWidth = 4

// etLineDash(segments) 虚线
ctx.save()
ctx.beginPath()
ctx.moveTo(50, 100)
ctx.lineTo(700, 100)
ctx.setLineDash([30, 60, 90])
ctx.stroke()
ctx.restore()

在这里插入图片描述

  • lineDashOffset虚线偏移
const canvas = document.getElementById('canvas')
canvas.width = window.innerWidth
canvas.height = window.innerHeight
const ctx = canvas.getContext('2d')
// 描边的着色样式
ctx.strokeStyle = 'maroon'
// lineWidth：描边宽
ctx.lineWidth = 4

// lineDashOffset 虚线偏移
ctx.save()
ctx.beginPath()
ctx.moveTo(50, 100)
ctx.lineTo(700, 100)
ctx.setLineDash([60])
ctx.stroke()
ctx.restore()

ctx.save()
ctx.beginPath()
ctx.moveTo(50, 150)
ctx.lineTo(700, 150)
ctx.setLineDash([60])
ctx.lineDashOffset = 60
ctx.stroke()
ctx.restore()

ctx.save()
ctx.beginPath()
ctx.moveTo(50, 200)
ctx.lineTo(700, 200)
ctx.setLineDash([60])
// 偏移过多之后，前面空白的也会适应的补上
ctx.lineDashOffset = 150
ctx.stroke()
ctx.restore()

在这里插入图片描述

六、投影

注意：投影是上下文对象的一种属性，在绘制图形时，无论执行的是描边方法，还是填充方法，都会在其所绘图形的后面添加投影

const canvas = document.getElementById('canvas')
canvas.width = window.innerWidth
canvas.height = window.innerHeight
const ctx = canvas.getContext('2d')

// 位置：shadowOffsetX = float, shadowOffsetY = float
// 模糊度：shadowBlur = float
// 颜色：shadowColor = color
ctx.beginPath()
ctx.arc(300, 200, 100, 0, Math.PI * 2)
ctx.fillStyle = 'red'
ctx.shadowColor = '#000'
ctx.shadowOffsetY = 30
ctx.shadowBlur = 30
ctx.fill()

在这里插入图片描述

V。on
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Canvas基础
Calla_Lj的博客
11-20 912
Canvas基础 1. 这个图从哪里来 A)展示绘图效果的标签,行内块元素 B)打开canvas,(通过getContext方法打开),然后在上面绘图 2.Canvas绘图步骤 A)移动到开始位置 .moveTo(x,y) B)开始画线条 .lineTo(x,y) C)描边显示 .stroke() 3.画布大小在canvas标签设置 A) 4.描边颜色: .strokeSty...
HTML5Canvas基础教程
07-22
资源名称：HTML5 Canvas基础教程内容简介：《HTML5 Canvas基础教程》从HTML5和Javaｓｃｒｉｐｔ(以及jQuery)的基础知识讲起，全面介绍了HTML5 Canvas的各种特性，包括渲染上下文、坐标系统、绘制图形、保存和恢复...
canvas 基础
anran_1211的博客
12-26 276
canvas 是一个二维网格 获取canvas   var c = document.getElementById('myCanvas')； 创建2d空间   var ctx = c.getContext('2d')； 设置颜色       ctx.fillStyle = "#000"； 定义矩形的填充方式  ctx.fillRect(x,y,width,height)； can
Canvas基础(一)
lsp199508的博客
06-17 434
Canvas建立于有一定的JavaScript学习基础上，主要用于动画，图形的绘制，具有强大的功能。
canvas学习之基础
木呆呆的博客
11-26 198
&amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;&amp;lt;/title&amp;gt; &amp;lt;style type=&quot;text
canvas基础资料
01-17
canvas基础资料
Canvas 基础绘制
03-29
以下所有 set 打头的方法均为微信小程序特有, 去掉 set 即为 CanvasRenderingContext2D 的属性名. .stroke() 描出当前路径  .setStrokeStyle(color) 设置路径颜色  .setLineWidth(Number lineWidth) 设置路径宽度...
canvas基础代码教程
03-19
这个"canvas基础代码教程...总之，这个"canvas基础代码教程"将涵盖Canvas的基本概念、绘图方法和动画实现。通过学习这些HTML页面，读者可以掌握Canvas的基本用法，并能运用到实际项目中，创建出富有动态效果的网页。
HTML5 Canvas基础教程源码
10-30
《HTML5 Canvas基础教程》从HTML5和JavaScript(以及jQuery)的基础知识讲起，全面介绍了HTML5 Canvas的各种特性，包括渲染上下文、坐标系统、绘制图形、保存和恢复画布状态，以及变形、合成、处理图像和视频等，让...
Canvas基础知识
何小变
10-31 375
Canvas是画布，在JavaScript上面绘制，代码实现： 在HTML中的代码： <!doctype html> <body> <canvas width="300" height="150"></canvas> //默认尺寸 </body> </html> 在JavaScript上面的代码： <script...
canvas基础及svg
学习随笔
04-11 313
canvas的使用 页面上有一个canvas标签 获取到这个标签 var canvas = decument.ElementsByTagName(“canvas”); 得到一个用于在画布上绘图的环境。 var ctx = canvas.getContext(“2d”) //目前只支持2d 在CanvasRenderingContext2D 对象的原型链上编程，例如画一个扇形 C...
canvas基础简单易懂教程（完结，多图）
最新发布
forever
03-02 1839
Canvas API 提供了一个通过JavaScript 和 HTML的元素来绘制图形的方式。它可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。 Canvas API 主要聚焦于 2D 图形。而同样使用元素的 WebGL API 则用于绘制硬件加速的 2D 和 3D 图形。
Canvas入门教程
weixin_46056955的博客
02-10 456
HTML5中新增的标签用于在网页实时生成图像，并且可以操作图像内容，基本上它是一个可以用JavaScript操作的位图（bitmap）
canvas基础学习笔记
Lotus的博客
02-20 454
1.什么是canvas 1.1 canvas 相关概念 1、HTML5 标签，表示画布，作为图像绘制的容器 canvas 元素本身是没有绘图能力的，所有的绘制工作必须在 脚本如JavaScript 内部完成 2、画布是一个矩形区域，您可以控制其每一像素。 3、canvas DOM对象，像所有的dom对象一样Canvas 对象有自己本身的属性、方法和事件。 canvas dom...
五分钟学会 Canvas 基础（一）
Tox-boy的博客
07-18 3860
0.前言 最近忙里偷闲，来写的这篇文章，但是中午出去吃个饭，回来因为自己的误操作，把上午的文章全删除了，还没法找回。 小编真的是瞬间觉得整个人生都灰暗了。 心塞，这次真的不想多说什么了。 ————-我是华丽的分割线————– 终于把这篇文章写完了，关于本文，针对读者主要是之前从未接触过 Canvas的同学。当然，你要学 canvas 一定要有 JS 基础啦。 其
Html5中canvas的一些使用
热门推荐
sun
05-31 1万+
   最近在研究HTML5，发现其中的canvas用途很广。不但可以绘制图形，还可以制作图片线性渐变，而且还能渲染文字做成特效。觉得挺有趣，于是把学习的内容记录起来了。     1.绘制圆形图  Html代码：   &lt;canvas id="roundness" width="600" height="300"&gt;                                      ...
HTML5Canvas绘图（上）
最好的一天
11-26 1万+
1.Canvas绘制步骤 在html5页面中添加canvas元素，定义id属性值以便后面调用            &lt;canvas id="myCanvas" width="500" height="200"&gt;&lt;/canvas&gt; 使用id寻找页面中的canvas元素           var c=document.getElementById("myCanvas");
数据可视化 -- canvas基本使用
weixin_50983325的博客
10-21 1071
canvas绘制线条 const canvas = document.getElementById('canvas') const ctx = canvas.getContext('2d') ctx.beginPath() ctx.lineWidth = 4 ctx.strokeStyle = 'orange' // 起点 终点 中间点 ctx.moveTo(100, 100) ctx.lineTo(300, 300) ctx.lineTo(500, 200) ctx.stroke() ctx.clo
HTML5 Canvas基础教程：入门与元素详解
HTML5 Canvas入门基础教程是针对初学者设计的一系列指导，旨在帮助他们掌握这个强大的HTML5特性。Canvas是HTML5新增的一个元素，专门用于通过JavaScript进行图形绘制、动画制作和数据可视化。与传统的元素相比，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值