CSS3画布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.
  • 设置 fillStylestrokeStyle 的值为 渐变 (刚刚设置的渐变样式)
  • 使用 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>

在这里插入图片描述

  • 1
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值