学习Canvas基础-添加颜色、线性渐变和径向渐变

最新推荐文章于 2024-04-16 09:21:14 发布

丠丠冲冲冲

最新推荐文章于 2024-04-16 09:21:14 发布

阅读量1.7k

点赞数 1

文章标签：学习 javascript 前端

本文链接：https://blog.csdn.net/qq_67983277/article/details/127942037

版权

添加颜色的方法

fillStyle 使用内部方式描述颜色和样式的属性
ctx.fillStyle = color;
ctx.fillStyle = gradient;
ctx.fillStyle = pattern;
选项：
color–DOMString 字符串，被转换成 CSS 颜色值。
gradient–CanvasGradient 对象（线性渐变或者放射性渐变）.
pattern–CanvasPattern 对象（可重复图像）。
strokeStyle 描述画笔（绘制图形）颜色或者样式的属性。默认值是 #000 (black）
ctx.strokeStyle = color;
ctx.strokeStyle = gradient;
ctx.strokeStyle = pattern;
选项：
color–DOMString 字符串，可以转换成 CSS 值。
gradient–CanvasGradient 对象（线性渐变或放射性渐变）。
pattern–CanvasPattern 对象（可重复的图片）。

fillStyle 事例

1、选项color事例

  <!-- 兼容性写法，在低版本时标签内部的文字才会显示 -->
  <canvas id="cont" width="500px" height="500px">你的浏览器版本过低,请升级浏览器或者使用chrome打开!</canvas>
  <script>
    //  获取canvas画布
    const canvas = document.querySelector('#cont')
    // 获取画布的应用上下文
    const ctx = canvas.getContext('2d')
    ctx.beginPath()
    ctx.fillStyle = "#F69";
    ctx.fillRect(300, 300, 100, 100)
    ctx.closePath()

在这里插入图片描述

2、选项gradient事例（渐变）

线性渐变 createLinearGradient

//	方法创建一个沿参数坐标指定的直线的渐变。
//	ctx.createLinearGradient(x0, y0, x1, y1);
//	x0--起点的 x 轴坐标。
//	y0--起点的 y 轴坐标。
//	x1--终点的 x 轴坐标。
//	y1--终点的 y 轴坐标。
//	返回值
//	CanvasGradient一个根据指定线路初始化的线性 CanvasGradient 对象。

 <!-- 兼容性写法，在低版本时标签内部的文字才会显示 -->
  <canvas id="cont" width="800px" height="150px">你的浏览器版本过低,请升级浏览器或者使用chrome打开!</canvas>
  <script>
  //  获取canvas画布
  const canvas = document.querySelector('#cont')
  // 获取画布的应用上下文
  const cxt = canvas.getContext('2d')
  const text = 'JavaScript 是世界上最灵活的语言'
  cxt.font = 'bold 50px 微软雅黑'
  const gnt = cxt.createLinearGradient(0, 75, 800, 75)
  gnt.addColorStop(0, 'HotPink')
  gnt.addColorStop(1, 'LightSkyBlue')
  cxt.fillStyle = gnt
  cxt.fillText(text, 10, 90)
  </script>

在这里插入图片描述
径向渐变 createRadialGradient
渐变总是从起始圆开始（包括起始圆内部），朝着结束圆方向，直到遇到结束圆（不包括结束圆内部），简单点说如果两个圆成包含关系，这个就比较好理解，就是从里面的圆向外辐射，如果两个圆相交或者相离，就做两个圆的两条切线，从两条切线相交的一点开始向外辐射。

//	根据参数确定两个圆的坐标，绘制放射性渐变的方法。这个方法返回 CanvasGradient。
//	CanvasGradient ctx.createRadialGradient(x0, y0, r0, x1, y1, r1);
//	x0--开始圆形的 x 轴坐标。
//	y0--开始圆形的 y 轴坐标。
//	r0--开始圆形的半径。
//	x1--结束圆形的 x 轴坐标。
//	y1--结束圆形的 y 轴坐标。
//	r1--结束圆形的半径。
//	返回值
//	CanvasGradient---由两个指定的圆初始化的放射性 CanvasGradient 对象。

在这里插入图片描述

 <!-- 兼容性写法，在低版本时标签内部的文字才会显示 -->
  <canvas id="cont" width="500px" height="500px">你的浏览器版本过低,请升级浏览器或者使用chrome打开!</canvas>
  <script>
    //  获取canvas画布
    const canvas = document.querySelector('#cont')
    // 获取画布的应用上下文
    const ctx = canvas.getContext('2d')
    var gradient = ctx.createRadialGradient(250, 150, 10, 300, 200, 100)
    gradient.addColorStop(0, "#ffcccc")
    gradient.addColorStop(1, "red")
    ctx.fillStyle = gradient
    ctx.arc(300, 200, 100, 0, Math.PI * 2)
    ctx.fill()
  </script>

在这里插入图片描述

strokeStyle事例

1、选项color事例

<canvas id="myCanvas" width="220" height="220" style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签。</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.strokeStyle="#F69";
ctx.strokeRect(10,10,200,200);

在这里插入图片描述

2、选项gradient事例

线性渐变 createLinearGradient
简单说就是从一个点到另一个点之间的渐变。

//	方法创建一个沿参数坐标指定的直线的渐变。
//	ctx.createLinearGradient(x0, y0, x1, y1);
//	x0--起点的 x 轴坐标。
//	y0--起点的 y 轴坐标。
//	x1--终点的 x 轴坐标。
//	y1--终点的 y 轴坐标。
//	返回值
//	CanvasGradient一个根据指定线路初始化的线性 CanvasGradient 对象。

<!-- 兼容性写法，在低版本时标签内部的文字才会显示 -->
  <canvas id="cont" width="500px" height="500px">你的浏览器版本过低,请升级浏览器或者使用chrome打开!</canvas>
  <script>
    //  获取canvas画布
    const canvas = document.querySelector('#cont')
    // 获取画布的应用上下文
    const ctx = canvas.getContext('2d')
    const gnt = ctx.createLinearGradient(50, 50, 300, 300)
    gnt.addColorStop(0, 'black')
    gnt.addColorStop(0.5, '#fcc')
    gnt.addColorStop(1, 'red')
    ctx.lineWidth = 10;
    ctx.strokeStyle=gnt
    ctx.strokeRect(50, 50, 300, 300)
  </script>