【微信_小游戏_canvas_基础_笔记6】

adminwxs

于 2022-10-31 10:38:39 发布

阅读量454

点赞数

分类专栏：微信_小游戏_canvas_基础文章标签： javascript 游戏程序

本文链接：https://blog.csdn.net/adminwxs/article/details/127610797

版权

这篇笔记介绍了微信小游戏使用Canvas的基础知识，包括如何实现渐变色效果和文字渲染，内容简单易懂，最后展示了实际效果。

摘要由CSDN通过智能技术生成

微信_小游戏_canvas_基础_笔记6

渐变色

这一小节还是很简单的

//const { canvas } = require("./libs/weapp-adapter");
// 渐变
const ctx = canvas.getContext("2d")
console.log("s_5_ctx",ctx)
/*
* 通过打印ctx查看可知有3种渐变
* createConicGradient 创建锥形渐变
* createLinearGradient 创建线性渐变
* 参数1 开始X坐标
* 参数2 开始y坐标
* 参数3 结束X坐标
* 参数4 结束y坐标
* createRadialGradient 创建径向渐变
* 参数1 开始圆心X坐标
* 参数2 开始圆心y坐标
* 参数3 开始圆半径
* 参数4 结束圆心X坐标
* 参数5 结束圆心y坐标
* 参数6 结束圆半径
* addColorStop 
* 参数1 设定的颜色离渐变结束点的偏移量(0~1)
* 参数2 设定颜色
*/

let c_w = ctx.canvas.width;
let c_h = ctx.canvas.height;

/* 线性渐变 */
let clg = ctx.createLinearGradient(0,0,c_w,c_h/2)
console.log("clg",clg)
clg.addColorStop(0,"red")
clg.