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

添加颜色的方法
  • 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>

在这里插入图片描述

  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML5线性渐变方向可以通过指定起始点和结束点的坐标来控制,示例代码如下: ```html <canvas id="myCanvas" width="200" height="200"></canvas> ``` ```javascript var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); // 创建线性渐变对象 var linearGradient = ctx.createLinearGradient(0, 0, 200, 0); // 添加渐变颜色 linearGradient.addColorStop(0, 'red'); linearGradient.addColorStop(0.5, 'green'); linearGradient.addColorStop(1, 'blue'); // 应用渐变 ctx.fillStyle = linearGradient; ctx.fillRect(0, 0, 200, 200); ``` 而使用canvas来完成线性渐变径向渐变的功能,则可以使用`createLinearGradient()`和`createRadialGradient()`方法创建渐变对象,并使用`addColorStop()`添加渐变颜色,最后使用`fillStyle`属性将渐变应用到图形上,示例代码如下: ```javascript var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); // 创建线性渐变对象 var linearGradient = ctx.createLinearGradient(0, 0, 200, 0); linearGradient.addColorStop(0, 'red'); linearGradient.addColorStop(0.5, 'green'); linearGradient.addColorStop(1, 'blue'); // 应用线性渐变 ctx.fillStyle = linearGradient; ctx.fillRect(0, 0, 200, 200); // 创建径向渐变对象 var radialGradient = ctx.createRadialGradient(100, 100, 50, 100, 100, 100); radialGradient.addColorStop(0, 'yellow'); radialGradient.addColorStop(1, 'orange'); // 应用径向渐变 ctx.fillStyle = radialGradient; ctx.beginPath(); ctx.arc(100, 100, 100, 0, 2 * Math.PI); ctx.fill(); ```

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值