canvas基础介绍

最新推荐文章于 2024-04-28 17:03:13 发布

半兽先生

最新推荐文章于 2024-04-28 17:03:13 发布

阅读量689

点赞数 1

分类专栏：前端文章标签： css html css3

本文链接：https://blog.csdn.net/qq_43770056/article/details/128642208

版权

前端专栏收录该内容

66 篇文章 3 订阅

订阅专栏

canvas

canvas标签是自定义图形比如图形或者图标

但是canvas仅仅是一个容器你必须使用脚本来绘制图形

这个元素是为客户端图形设计的它自身是没有任何行为

但是我们可以通过js来实现图形的绘制最终绘制在canvas画布上边

canvas绘图api

定义通过画布的getContext()方法来获取一个绘图的环境

canvas属性

width 宽度 px

height 高度 px

用来设置画布的宽度和高度默认值是一个矩形（300*150）

canvas自身没有绘图能力所有的绘图需要借助js来实现

创建画布	<canvas id="canvas" width="600" height="600"></canvas>
得到canvas的画布	var canvas=document.querySelector("#canvas");
现在的绘图环境为2d环境	var ctx = canvas.getContext("2d");
设置颜色	ctx.fillStyle = 'green';
绘制矩形	ctx.fillRect(100, 100, 200, 150);
fillStyle	改属性可以是css颜色渐变或者图案默认值 #000
fillRect(x,y,width,height)	填充，里边有四个参数前两个参数表示的当前矩形在画布中心x,y轴的位置 (当前图形左上角) 后两个参数表示的当前矩形的宽度和高度
strokeStyle	改属性可以是css颜色渐变或者图形描边
strokeRect(x,y,width,height)	无填充里边有四个参数前两个参数表示的当前矩形在画布中心x,y轴的位置 (当前图形左上角) 后两个参数表示的当前矩形的宽度和高度
clearRect(x,y,width,height)	在给定的矩形内清除指定的元素 x,y 代表当前矩形在画布中心x,y的位置 width height表示矩形宽度和高度
canvas绘制简单的一些图形	绘制直线定义开始坐标和结束坐标使用stroke()方法绘制线条
moveTo()	把路径移动到画布中的指定的点
lineTo()	添加一个点在画布中创建从该点到原点指定点的线条
arc()	绘制一个圆还可以绘制圆弧
arc(x,y,r, sAngle, eAngle, counterclockwise)	x,y 定义了圆的圆心位置 r 表示圆的半径 sAngle 起始角 eAngle 结束角 counterclockwise 可选规定了是以顺时针还是逆时针绘制圆 true 逆时针 false 顺时针
fill()	给当前图形进行填充
lineWidth	线的宽度
canvas绘制文本
font	定义字体
fillText(text, x, y)	填充字体，canvas上绘制实心的文本绘制文字 text 表示的是绘制文本内容
fillStyle	字体颜色
strokeText(text, x, y)	空心字体 canvas上绘制空心的字体描边字体
let canvas=document.getElementById("demo") let ctx=canvas.getContext("2d") ctx.font="120px 微软雅黑" ctx.fillStyle="red" ctx.fillText("hello world", 100, 300) ctx.strokeStyle="red" ctx.lineWidth=3 ctx.strokeText("hello world", 100, 100)
实现椭圆
var canvas=document.querySelector("canvas") var ctx=canvas.getContext("2d") ctx.ellipse(200,200,100,50,0,0,.5*Math.PI,false) ctx.fillStyle="#fff" ctx.fill() ctx.strokeStyle="blue" ctx.lineWidth=5 ctx.stroke()

canvas绘制简单的一些图形

绘制直线	定义开始坐标和结束坐标使用stroke()方法绘制线条
moveTo( )	把路径移动到画布中的指定的点
lineTo( )	添加一个点在画布中创建从该点到原点指定点的线条
arc( )	绘制一个圆还可以绘制圆弧 arc(x,y,r, sAngle, eAngle, counterclockwise) x,y 定义了圆的圆心位置 r 表示圆的半径 sAngle 起始角 eAngle 结束角 counterclockwise 可选规定了是以顺时针还是逆时针绘制圆 true 逆时针 false 顺时针
fill( )	给当前图形进行填充
lineWidth	线的宽度

<canvas id="canvas" width="500" height="500" style="margin: auto; border: 1px solid #ccc; display: block;"></canvas>
<script>
    let canvas = document.getElementById("canvas")
    let ctx = canvas.getContext("2d")
     ctx.moveTo(130,30)
     ctx.lineTo(100,100)
     ctx.stroke()
    // 绘制三角形
    ctx.moveTo(200,200)
    ctx.lineTo(100,300)
    ctx.lineTo(300,300)
    ctx.lineTo(200,200)
    ctx.stroke()
    // 直角梯形
    ctx.moveTo(50,50)
    ctx.lineTo(200,50)
    ctx.lineTo(300,200)
    ctx.lineTo(50,200)
    ctx.lineTo(50,50)
    ctx.stroke()
    // 绘制圆
    ctx.moveTo(200,200)
    ctx.lineTo(300,200)
    ctx.lineTo(200,300)
    ctx.lineTo(200,200)
    ctx.arc(200, 200, 100, 0, 2 * Math.PI, false)
    ctx.fillStyle = "#cb3232"
    ctx.fill()
    ctx.strokeStyle="#cb3232"
    ctx.lineWidth = 10
    ctx.strokeStyle = "green"
    ctx.stroke()
    ctx.beginPath()
</script>

canvas绘制文本

font

定义字体

fillText(text, x, y) 填充字体

canvas上绘制实心的文本绘制文字

text 表示的是绘制文本内容

fillStyle

字体颜色

strokeText(text, x, y) 空心字体

canvas上绘制空心的字体描边字体

<canvas width="1500" height="800" id="demo"></canvas>
<script>
    let canvas=document.getElementById("demo")
    let ctx=canvas.getContext("2d")
    ctx.font="120px 微软雅黑"
    ctx.fillStyle="red"
    ctx.fillText("hello world", 100, 300)
    ctx.strokeStyle="red"
    ctx.lineWidth=3
    ctx.strokeText("hello world", 100, 100)
</script>

canvas绘制椭圆

elipse(x,y,radiusX,radiusY,rotation,startAngle, endAngle,anticlockwise)\
x,y	圆心坐标
radiusX,radiusY	半径x 半径y
rotation	旋转角度
startAngle	起始角度
endAngle	结束角度
anticlockwiseanticlockwise	顺时针或者逆时针旋转

<canvas width="1000" height="500" style="border: 1px solid red;"></canvas>
<script>
    var canvas=document.querySelector("canvas")
    var ctx=canvas.getContext("2d")
    ctx.ellipse(200,200,100,50,0,0,.5*Math.PI,false)
    ctx.fillStyle="#fff"
    ctx.fill()
    ctx.strokeStyle="blue"
    ctx.lineWidth=5
    ctx.stroke()
</script>

canvas绘制贝赛尔曲线(就是数学中抛物线)

二次方贝赛尔曲线	quadraticCurveTo(cpx,cpy,x,y)
cpx,cpx	第一个点用于贝塞尔曲线的控制点x y坐标
x,y	结束点x,y坐标曲线的开始是当前路径的最后一个点如果路径不存在可以使用beiginPath()和moveTo()来定义开始点三次方贝塞尔曲线
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)	里边有三个点第一个点/第二个点事用于三次方贝塞尔曲线的控制点 x y 表示结束点的位置曲线的开始是当前路径的最后一个点如果路径不存在可以使用beiginPath()和moveTo()来定义开始点

<canvas width="1000" height="800" id="demo" style="border: 1px solid red;"></canvas>
<script>
    var canvas=document.getElementById("demo")
    var ctx=canvas.getContext("2d")
   ctx.beginPath()
   ctx.moveTo(0,0)
   ctx.bezierCurveTo(40,150,20,130,200,300)
   ctx.stroke()
   ctx.beginPath()
   ctx.moveTo(50,0)
   ctx.bezierCurveTo(40,-150,100,400,200,20)
   ctx.stroke()
   ctx.beginPath()
   ctx.moveTo(0,0)
   ctx.bezierCurveTo(150,500,300,-300,500,200)
   ctx.stroke()
   哆啦A梦左半边胡子
   ctx.beginPath()
   ctx.moveTo(100,120)
   ctx.bezierCurveTo(20, 60, 40, 200, 200, 170)
   ctx.stroke()
    ctx.beginPath()
    ctx.moveTo(50,0)
    ctx.quadraticCurveTo(-200,100,200,150)
    ctx.stroke()
    // 头
    ctx.beginPath()
    ctx.ellipse(500,300, 150, 135, 0, 2*Math.PI/3, Math.PI/3, false)
    ctx.fillStyle="#84C2F1"
    ctx.fill()
    ctx.stroke()
    // 脸
    ctx.beginPath()
    ctx.ellipse(500,332, 130, 105, 0, 2*Math.PI/3/12*12.4, Math.PI/3/6*5.6, false)
    ctx.fillStyle="#fff"
    ctx.fill()
    ctx.stroke()
    
    // 左眼睛
    ctx.beginPath()
    ctx.ellipse(460,232, 30, 40, Math.PI/18, 0, 2*Math.PI, false)
    ctx.fillStyle="#fff"
    ctx.fill()
    ctx.lineWidth=3
    ctx.stroke()
    // 右眼睛
    ctx.beginPath()
    ctx.ellipse(522,232, 30, 40, -Math.PI/18, 0, 2*Math.PI, false)
    ctx.fillStyle="#fff"
    ctx.fill()
    ctx.lineWidth=3
    ctx.stroke()
    // 眉毛
    ctx.beginPath()
    ctx.moveTo(450,195)
    ctx.quadraticCurveTo(485,240,523,195)
    ctx.lineWidth=3
    ctx.stroke()
</script>

canvas绘制图像

图像放置在画布上

drawImage(image, x, y)

image 表示要放置的图像

x,y 表示的是图像的坐标位置

width 使用图像视频的宽度

height 使用图像视频的高度

width height是可选参数可以写也可以不写设置当前绘制图像宽高

使用canvas来绘制图像的时候我们需要知道后边写出来的图形层级高于前边所写图像的层级

<img src="./img/1.jpg" alt="" style="width: 100px;">
<canvas width="1000" height="800" style="border: 1px solid red;" id="canvas"></canvas>
<script>
    var canvas=document.getElementById("canvas")
    var ctx=canvas.getContext("2d")
    var img=document.querySelector("img")
    window.onload=function() {
       ctx.drawImage(img, 100, 100)
       
       ctx.drawImage(img, 300, 300)
       ctx.drawImage(img, 200, 200)
    }
</script>

贝赛尔曲线

canvas绘制贝赛尔曲线(就是数学中抛物线)

二次方贝赛尔曲线

quadraticCurveTo(cpx,cpy,x,y)

cpx,cpx 第一个点用于贝塞尔曲线的控制点x y坐标

x,y 结束点x,y坐标

曲线的开始是当前路径的最后一个点

如果路径不存在可以使用beiginPath()和moveTo()来定义开始点

三次方贝塞尔曲线

bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)

里边有三个点

第一个点/第二个点事用于三次方贝塞尔曲线的控制点

x y 表示结束点的位置

曲线的开始是当前路径的最后一个点

如果路径不存在可以使用beiginPath()和moveTo()来定义开始点

绘制图像

将图像放置在画布上

drawImage(image, x, y)

image 表示要放置的图像

x,y 表示的是图像的坐标位置

width 使用图像视频的宽度

height 使用图像视频的高度

width height是可选参数可以写也可以不写设置当前绘制图像宽高

使用canvas来绘制图像的时候我们需要知道后边写出来的图形层级高于前边所写图像的层级

var canvas=document.getElementById("canvas")

var ctx=canvas.getContext("2d")

var img=document.querySelector("img")

window.οnlοad=function() {

ctx.drawImage(img, 100, 100)

ctx.drawImage(img, 300, 300)

ctx.drawImage(img, 200, 200)

}

<svg width="1000" height="500" style="border: 1px solid red;"> 
         <!-- path路径 -->
  <path d="M150 0 L75 200 L225 200 Z" />

         <!-- <path d="M100 100 L200 100 L200 150 L100 150 Z" fill="none" stroke="#333" stroke-width="3"> -->

            <!-- <path id="lineAB" d="M 100 350 l 150 -300" stroke="red"
            stroke-width="3" fill="none" /> -->
            <!-- <path id="lineBC" d="M 250 50 l 150 300" stroke="red"
            stroke-width="3" fill="none" /> -->
            <!-- <path d="M 175 200 l 150 0" stroke="green" stroke-width="3"
            fill="none" /> -->
            <!-- <path d="M 100 350 q 150 -300 300 0" stroke="blue"
            stroke-width="5" fill="none" /> -->
            <!-- Mark relevant points -->
            <!-- <g stroke="black" stroke-width="3" fill="black">
                <circle id="pointA" cx="100" cy="350" r="3" />
                <circle id="pointB" cx="250" cy="50" r="3" />
                <circle id="pointC" cx="400" cy="350" r="3" />
            </g> -->
            <!-- Label the points -->
            <!-- <g font-size="30" font="sans-serif" fill="black" stroke="none"
            text-anchor="middle">
                <text x="100" y="350" dx="-30">A</text>
                <text x="250" y="50" dy="-10">B</text>
                <text x="400" y="350" dx="30">C</text>
            </g> -->


         <!-- 北斗七星 -->
         <!-- <polyline points="50,300,150,210,240,230,350,260,420,350,520,330,530,190" stroke="#333" stroke-width="3" fill="none"></polyline> -->
         <!-- 折线 -->
         <!-- <polyline points="10,10, 100,180, 400, 10" stroke="#333" fill="none"></polyline> -->
         <!-- 多边形 -->
         <!-- <polygon points="50, 50, 50, 100, 100, 100" fill="none" stroke="#333"></polygon> -->
         <!-- <polygon points="100,100,150,150,125,200,75,200,50,150" fill="none" stroke="#333"></polygon>
         <circle cx="100" cy="150" r="4" stroke="#333" stroke-width="2" fill="none"></circle>
         <line x1="100" y1="160" x2="100" y2="200" stroke="#333" stroke-width="3"></line> -->
         <!-- <rect x="100" y="100" rx="0" ry="0" width="200" height="100" fill="red" stroke="blue" stroke-width="2"></rect> -->
         <!-- <circle cx="240" cy="240" r="50" fill="none" stroke="red" stroke-width="20"></circle> -->
         <!-- <line x1="50" y1="50" x2="300" y2="300" stroke="red" stroke-width="20"></line>
        <line x1="49" y1="49" x2="120" y2="120" stroke="yellow" stroke-width="21"></line>
        <line x1="230" y1="230" x2="301" y2="301" stroke="yellow" stroke-width="21"></line> -->

        <!-- 三角形 -->
        <!-- <line x1="50" y1="50" x2="50" y2="100" stroke="#333"></line>
        <line x1="50" y1="100" x2="100" y2="100" stroke="#333"></line>
        <line x1="100" y1="100" x2="50" y2="50" stroke="#333"></line> -->

        <!-- 西瓜 -->
        <!-- <circle r="100" cx="200" cy="200" fill="none" stroke="green" stroke-width="10"></circle>
        <circle r="90" cx="200" cy="200" fill="#FF4D4E"></circle>
        <rect x="170" y="170" width="10" height="5" rx="50%" ry="50%"></rect>
        <rect x="190" y="170" width="10" height="5" rx="50%" ry="50%"></rect>
        <rect x="140" y="210" width="10" height="5" rx="50%" ry="50%"></rect>
        <rect x="200" y="230" width="10" height="5" rx="50%" ry="50%"></rect>
        <rect x="240" y="150" width="10" height="5" rx="50%" ry="50%"></rect>
        <rect x="200" y="200" width="10" height="5" rx="50%" ry="50%"></rect>
        <rect x="200" y="190" width="10" height="5" rx="50%" ry="50%"></rect> -->

        <!-- 椭圆 -->
        <!-- <ellipse cx="200" cy="200" rx="50" ry="80" fill="" stroke="red" stroke-width="3"></ellipse> -->
     <!-- </svg> -->
     <svg width="1800" height="1000" xmlns="http://www.w3.org/2000/svg">
         <ellipse cx="300" cy="300" rx="50" ry="100" transform="rotate(-45)"></ellipse>
         <ellipse cx="300" cy="300" rx="50" ry="100" transform="translate(400)"></ellipse>
         <ellipse cx="300" cy="300" rx="50" ry="100" transform="rotate(45)"></ellipse>
         <ellipse cx="300" cy="300" rx="50" ry="100" transform="rotate(90)"></ellipse>

        <!-- <rect width="300" height="100" x="50" y="50" rx="0" ry="0" transform="rotate(70)"></rect> -->

        <!-- <g id="Layer_1">
            <title>Layer 1</title>
            <path id="svg_1" d="m186,165c1,0 62,64 131,1" opacity="NaN" stroke="#000" fill="none"/>
           </g> -->
       </svg>

canvas动画过程

******************************清屏-更新-渲染******************************
//得到canvas的画布
var canvas = document.querySelector("#canvas");
//得到画布的上下文，上下文有两个，2d的上下文和3d的上下文
var ctx = canvas.getContext("2d");
//设置颜色
ctx.fillStyle = 'green';
//信号量
var left=100;
//动画过程
setInterval(function() {
    //清除画布，0,0代表从什么位置开始清楚，600,600代表清楚地宽度和高度
    ctx.clearRect(0,0,600,600);
    //更新信号量
    left++;
    ctx.fillRect(left,100,100,100)
},10)
//绘制矩形
console.log(ctx);