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

最新推荐文章于 2024-09-19 16:39:47 发布

原创

最新推荐文章于 2024-09-19 16:39:47 发布 · 531 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #游戏程序

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

微信_小游戏_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