CSS3画布Canvas知识点

文章目录

Canvas
- 使用 style 绘制
- 使用 JavaScript 绘制
- Canvas 坐标
- Canvas 路径
- 绘制圆形
- Canvas 文本
- - 在画布上绘制一个高 30px 的文字（实心）
  - 在画布上绘制一个高 30px 的文字（空心）
- Canvas 渐变
- - 线性渐变
  - 径向/圆渐变
- Canvas 图像

Canvas

<canvas> 元素用于图形的绘制，该标签只是图形容器，要想绘制图形，还必须使用脚本 (通常是JavaScript)。

语法：<canvas id="myCanvas" width="200" height="100"></canvas>

id：便于在脚本中被引用
width：画布的宽
height：画布的高

可以在HTML页面中使用多个 <canvas> 元素，进行图形的绘制。

使用 style 绘制

<canvas id="myCanvas" width="200" height="100" style="border:5px solid pink;">浏览器不支持 canvas 画布效果
</canvas>

使用 JavaScript 绘制

fillStyle：设置CSS颜色、渐变或图案，默认是#000000（黑色）。

fillRect(x,y,width,height) ：设置矩形当前的填充方式

x：x轴坐标
y：y轴坐标
width：宽
height：高

<canvas id="myCanvas" width="200" height="100" style="border:5px solid pink">浏览器不支持 canvas 画布效果
</canvas>
<script>const myC = document.getElementById("myCanvas")// 2d 图let ctx = myC.getContext("2d")// 设置颜色ctx.fillStyle = "red"// 定义填充图形的坐标和宽高// fillRect(x坐标, y坐标, 宽, 高)ctx.fillRect(0, 0, 150, 80)
</script>

Canvas 坐标

canvas 是一个二维网格。

canvas 的左上角坐标为 (0,0)

Canvas 路径

在Canvas上画线

语法：(三个条件缺一不可)

moveTo(x,y)：线条开始坐标
lineTo(x,y)：线条结束坐标
stroke()：绘制线条

定义开始坐标(0,0), 和结束坐标 (200,100)

<canvas id="myCanvas" width="200" height="100" style="border:5px solid pink">浏览器不支持 canvas 画布效果
</canvas>
<script>const myC = document.getElementById("myCanvas")let ctx = myC.getContext("2d")// 起始坐标ctx.moveTo(0, 0)// 结束坐标ctx.lineTo(200, 100)// 绘制线条ctx.stroke()
</script>

绘制圆形

语法：arc(x,y,r,start,stop)

x：圆心在x轴上的坐标
y：圆心在y轴上的坐标
r：半径长度
start：起始角度，以弧度表示，以x轴方向为0度
stop：结束角度，以弧度表示

绘制一个圆

<canvas id="myCanvas" width="200" height="100" style="border:5px solid pink">浏览器不支持 canvas 画布效果
</canvas>
<script>const myC = document.getElementById("myCanvas")let ctx = myC.getContext("2d")// 开始路径ctx.beginPath()// arc(x轴圆点,y轴圆点,半径,开始弧度,结束弧度)ctx.arc(100, 50, 40, 0, 180)// 绘制线条ctx.stroke()
</script>

Canvas 文本

使用 canvas 绘制文本

语法：

font：定义字体
fillText(text,x,y)：绘制实心的文本
- text：文字
- x：x轴坐标
- y：y轴坐标
strokeText(text,x,y)：绘制空心的文本

在画布上绘制一个高 30px 的文字（实心）

<canvas id="myCanvas" width="200" height="100" style="border:5px solid pink">浏览器不支持 canvas 画布效果
</canvas>
<script>const myC = document.getElementById("myCanvas")let ctx = myC.getContext("2d")// 定义字体ctx.font = "30px 宋体"// 填充文字，坐标位置ctx.fillText("hello world", 10, 50)
</script>

在画布上绘制一个高 30px 的文字（空心）

<canvas id="myCanvas" width="200" height="100" style="border:5px solid pink">浏览器不支持 canvas 画布效果
</canvas>
<script>const myC = document.getElementById("myCanvas")let ctx = myC.getContext("2d")// 定义字体ctx.font = "30px 宋体"// 填充文字，坐标位置ctx.strokeText("hello world", 10, 50)
</script>

Canvas 渐变

渐变可以填充在矩形、圆形、线条、文本等等，各种形状可以自己定义不同的颜色。

语法：

createLinearGradient(x,y,x1,y1)：创建线性渐变
- x：起始位置的x轴坐标
- y：起始位置的y轴坐标
- x1：渐变终点位置的x坐标
- y1：渐变终点位置的y坐标
createRadialGradient(x,y,r,x1,y1,r1)：创建一个径向/圆渐变
- x：渐变的开始圆的 x 坐标
- y：渐变的开始圆的 y 坐标
- r：开始圆的半径
- x1：渐变的结束圆的 x 坐标
- y1：渐变的结束圆的 y 坐标
- r1：结束圆的半径

当我们使用渐变对象，必须使用两种或两种以上的停止颜色。

设置好上面的渐变样式之后，需要使用下面的几种方法来呈现出渐变效果：

addColorStop()：颜色停止，参数使用坐标来描述，可以是0至1.
设置 fillStyle 或 strokeStyle 的值为渐变 (刚刚设置的渐变样式)
使用 fillRect 来 绘制形状，如矩形、文本或一条线。

线性渐变

ctx.createLinearGradient(x,y,x1,y1)

(x, y) – 起始x轴坐标, 起始y轴坐标 – 从这个坐标就开始颜色的渐变

(x1, y1) – 结束x轴坐标, 结束y轴坐标 – 从这个坐标就慢慢的停止了颜色的渐变

<canvas id="myCanvas" width="200" height="100" style="border:5px solid pink">浏览器不支持 canvas 画布效果
</canvas>
<script>const myC = document.getElementById("myCanvas")let ctx = myC.getContext("2d")// ctx.createLinearGradient(起始x轴坐标, 起始y轴坐标, 结束x轴坐标, 结束y轴坐标)// 起始x轴坐标, 起始y轴坐标 -- 从这个坐标就开始颜色的渐变// 结束x轴坐标, 结束y轴坐标 -- 从这个坐标就慢慢的停止了颜色的渐变let grd = ctx.createLinearGradient(0, 0, 150, 0)// 线性开始的颜色grd.addColorStop(0, 'red')// 0-0.5 就是红色->粉红的线性过渡// 线性中间的颜色grd.addColorStop(0.5, 'pink')// 0.5-1 就是粉红到黄色的线性过渡// 线性结束的颜色grd.addColorStop(1, 'yellow')// 要将设置的线性渐变样式填充到现在矩形中，才会有显示的效果ctx.fillStyle = grd// 创建矩形，这样才有容器来装载填充的样式// ctx.fillRect(起始x轴坐标, 起始y轴坐标, 矩形宽，矩形高)// 这个只是设置矩形的开始坐标(x, y)和宽高// 只有内部的颜色是受线性渐变的影响ctx.fillRect(10, 10, 150, 80)
</script>

径向/圆渐变

ctx.createRadialGradient(x,y,r,x1,y1,r1)

(x, y) – 起始x轴坐标, 起始y轴坐标 – 从这个坐标就开始颜色的渐变

r – 初始的半径长度 – 这个是圆开始的半径 (我的理解是在这个半径长度还是最初那个颜色构成的，0处那个颜色)

(x1, y1) – 结束x轴坐标, 结束y轴坐标 – 从这个坐标就慢慢的停止了颜色的渐变

r1 – 结束时的半径 – 这个是圆结束的半径 (我的理解是在这个半径长度是最初和中间那些颜色构成的，[0,1)处那些颜色)

当 (x,y) 和 (x1,y1) 相同的情况下可形成同心圆

<canvas id="myCanvas" width="200" height="100" style="border:5px solid pink">浏览器不支持 canvas 画布效果
</canvas>
<script>const myC = document.getElementById("myCanvas")let ctx = myC.getContext("2d")// ctx.createRadialGradient(//      起始x轴坐标, 起始y轴坐标, 初始的半径长度, //      结束x轴坐标, 结束y轴坐标, 结束时的半径)// 一般来说将结束时的半径设的比较大，这样的径向渐变好看一些let grd = ctx.createRadialGradient(80, 50, 4, 90, 60, 100)// 渐变开始的颜色grd.addColorStop(0, 'red')// 0-0.5 就是红色->粉红的线性过渡// 渐变中间的颜色grd.addColorStop(0.5, 'pink')// 0.5-1 就是粉红到黄色的线性过渡// 渐变结束的颜色grd.addColorStop(1, 'yellow')// 要将设置的径向渐变样式填充到现在矩形中，才会有显示的效果ctx.fillStyle = grd// 创建矩形，这样才有容器来装载填充的样式// ctx.fillRect(起始x轴坐标, 起始y轴坐标, 矩形宽，矩形高)// 这个只是设置矩形的开始坐标(x, y)和宽高// 只有内部的颜色是受径向渐变的影响ctx.fillRect(10, 10, 160, 80)
</script>

Canvas 图像

把一幅图像放置到画布上

语法：drawImage(image,x,y)

image：获取到的<img>
x：起始的x轴
y：起始的y轴

把一幅图像放置到画布上

<!-- 网上的图，失效了换个就可以了-->
<!-- 图太大显示不完全-->
<img src="https://img0.baidu.com/it/u=3106776703,133036379&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800" width="200"height="100" alt="">
<canvas id="myCanvas" width="300" height="400" style="border:5px solid pink">浏览器不支持 canvas 画布效果
</canvas>
<script>const myC = document.getElementById("myCanvas")const img = document.getElementsByTagName("img")[0]/* img.onclick = function () {console.log('jj')} */let ctx = myC.getContext("2d")img.onload = function () {ctx.drawImage(img, 0, 0)}
</script>