web技术学习笔记和分享

Appearance

线性渐变和径向渐变 ​


01.线性渐变 ​

js
  // 1、获取canvas画布
var c1 = document.querySelector("#c1");
if (!c1.getContext) {
    console.log('当前浏览器不支持canvas,请下载最新的浏览器');
}
// 2. 获取画笔，上下文对象
var ctx = c1.getContext('2d')
// createLinearGradient(起点x,起点y,终点x,终点y)
var pinkPosition = 0
function render() {
    pinkPosition += 0.1
    if (pinkPosition > 1) {
        pinkPosition = 0
    }
    ctx.clearRect(0, 0, c1.width, c1.height)
    var linearGradient = ctx.createLinearGradient(100, 200, 400, 500)
    linearGradient.addColorStop(0, 'red')
    linearGradient.addColorStop(pinkPosition, 'pink')
    linearGradient.addColorStop(1, 'blue')
    ctx.fillStyle = linearGradient
    // 绘制矩形 fillRect(x,y,width,height)
    ctx.fillRect(100, 200, 300, 300)
    setTimeout(render, 100)
}
setTimeout(render, 100)
当前浏览器不支持canvas,请下载最新的浏览器 立即下载
<template>
  <canvas id="c1" width="600" height="400">
    当前浏览器不支持canvas,请下载最新的浏览器
    <a href="https://www.google.cn/chrome/index.html">立即下载</a>
  </canvas>
</template>

<script setup>
import { onMounted } from "vue";
onMounted(() => {
  // 1、获取canvas画布
  var c1 = document.querySelector("#c1");
  if (!c1.getContext) {
    console.log("当前浏览器不支持canvas,请下载最新的浏览器");
  }
  // 2. 获取画笔，上下文对象
  var ctx = c1.getContext("2d");
  // createLinearGradient(起点x,起点y,终点x,终点y)
  var pinkPosition = 0;
  function render() {
    pinkPosition += 0.1;
    if (pinkPosition > 1) {
      pinkPosition = 0;
    }
    ctx.clearRect(0, 0, c1.width, c1.height);
    var linearGradient = ctx.createLinearGradient(100, 200, 400, 500);
    linearGradient.addColorStop(0, "red");
    linearGradient.addColorStop(pinkPosition, "pink");
    linearGradient.addColorStop(1, "blue");
    ctx.fillStyle = linearGradient;
    // 绘制矩形 fillRect(x,y,width,height)
    ctx.fillRect(100, 200, 300, 300);
    setTimeout(render, 100);
  }
  setTimeout(render, 100);
});
</script>

<style scoped></style>

02.径向渐变 ​

js
// 1、获取canvas画布
var c1 = document.querySelector("#c1");
if (!c1.getContext) {
    console.log('当前浏览器不支持canvas,请下载最新的浏览器');
}
// 2. 获取画笔，上下文对象
var ctx = c1.getContext('2d')
var index = 0
function render() {
    index += 0.1
    if (index > 1) {
        index = 0
    }
    ctx.clearRect(0, 0, ctx.width, ctx.height)
    // createRedialGradient(圆心1x,圆心1y,圆心1r,圆心2x,圆心2y,圆心2r)
    var radialGradient = ctx.createRadialGradient(300, 200, 0, 300, 200, 100)
    radialGradient.addColorStop(0, 'red')
    radialGradient.addColorStop(index, 'pink')
    radialGradient.addColorStop(1, 'blue')
    ctx.fillStyle = radialGradient
    ctx.arc(300, 200, 100, 0, 2 * Math.PI)
    ctx.fill()
    setTimeout(render, 100)
}
setTimeout(render, 100)
当前浏览器不支持canvas,请下载最新的浏览器 立即下载
<template>
  <canvas id="c2" width="600" height="400">
    当前浏览器不支持canvas,请下载最新的浏览器
    <a href="https://www.google.cn/chrome/index.html">立即下载</a>
  </canvas>
</template>

<script setup>
import { onMounted } from "vue";
onMounted(() => {
  // 1、获取canvas画布
  var c1 = document.querySelector("#c2");
  if (!c1.getContext) {
    console.log("当前浏览器不支持canvas,请下载最新的浏览器");
  }
  // 2. 获取画笔，上下文对象
  var ctx = c1.getContext("2d");
  var index = 0;
  function render() {
    index += 0.1;
    if (index > 1) {
      index = 0;
    }
    ctx.clearRect(0, 0, ctx.width, ctx.height);
    // createRedialGradient(圆心1x,圆心1y,圆心1r,圆心2x,圆心2y,圆心2r)
    var radialGradient = ctx.createRadialGradient(300, 200, 0, 300, 200, 100);
    radialGradient.addColorStop(0, "red");
    radialGradient.addColorStop(index, "pink");
    radialGradient.addColorStop(1, "blue");
    ctx.fillStyle = radialGradient;
    ctx.arc(300, 200, 100, 0, 2 * Math.PI);
    ctx.fill();
    setTimeout(render, 100);
  }
  setTimeout(render, 100);
});
</script>

<style scoped></style>

03.径向渐变模拟3d球 ​

js
// 1、获取canvas画布
var c1 = document.querySelector("#c1");
if (!c1.getContext) {
  console.log('当前浏览器不支持canvas,请下载最新的浏览器');
}
// 2. 获取画笔，上下文对象
var ctx = c1.getContext('2d')
var radialGradient = ctx.createRadialGradient(250, 150, 10, 300, 200, 100)
radialGradient.addColorStop(0, 'pink')
radialGradient.addColorStop(1, 'red')
ctx.fillStyle = radialGradient
ctx.arc(300, 200, 100, 0, 2 * Math.PI)
ctx.fill()
当前浏览器不支持canvas,请下载最新的浏览器 立即下载
<template>
  <canvas id="c3" width="600" height="400">
    当前浏览器不支持canvas,请下载最新的浏览器
    <a href="https://www.google.cn/chrome/index.html">立即下载</a>
  </canvas>
</template>

<script setup>
import { onMounted } from "vue";
onMounted(() => {
  // 1、获取canvas画布
  var c1 = document.querySelector("#c3");
  if (!c1.getContext) {
    console.log("当前浏览器不支持canvas,请下载最新的浏览器");
  }
  // 2. 获取画笔，上下文对象
  var ctx = c1.getContext("2d");
  var radialGradient = ctx.createRadialGradient(250, 150, 10, 300, 200, 100);
  radialGradient.addColorStop(0, "pink");
  radialGradient.addColorStop(1, "red");
  ctx.fillStyle = radialGradient;
  ctx.arc(300, 200, 100, 0, 2 * Math.PI);
  ctx.fill();
});
</script>

<style scoped></style>

04.圆锥渐变 ​

js
// 1、获取canvas画布
var c1 = document.querySelector("#c1");
if (!c1.getContext) {
    console.log('当前浏览器不支持canvas,请下载最新的浏览器');
}
// 2. 获取画笔，上下文对象
var ctx = c1.getContext('2d')
// createConGradient(开始角度，x,y)  
var conicGradient = ctx.createConicGradient(Math.PI, 300, 200)
conicGradient.addColorStop(0, 'red')
conicGradient.addColorStop(.5, 'yellow')
conicGradient.addColorStop(1, 'blue')
ctx.fillStyle = conicGradient
ctx.fillRect(0, 0, 600, 400)
当前浏览器不支持canvas,请下载最新的浏览器 立即下载
<template>
  <canvas id="c4" width="600" height="400">
    当前浏览器不支持canvas,请下载最新的浏览器
    <a href="https://www.google.cn/chrome/index.html">立即下载</a>
  </canvas>
</template>

<script setup>
import { onMounted } from "vue";
onMounted(() => {
  // 1、获取canvas画布
  var c1 = document.querySelector("#c4");
  if (!c1.getContext) {
    console.log("当前浏览器不支持canvas,请下载最新的浏览器");
  }
  // 2. 获取画笔，上下文对象
  var ctx = c1.getContext("2d");
  // createConGradient(开始角度，x,y)
  var conicGradient = ctx.createConicGradient(Math.PI, 300, 200);
  conicGradient.addColorStop(0, "red");
  conicGradient.addColorStop(0.5, "yellow");
  conicGradient.addColorStop(1, "blue");
  ctx.fillStyle = conicGradient;
  ctx.fillRect(0, 0, 600, 400);
});
</script>

<style scoped></style>