在 HTML 中创建带矩阵的 JS 径向渐变
htmljavascriptprogramming scripts更新于 2026/1/18 9:48:17
带矩阵的 JS 径向渐变以以下方式创建。您可以尝试运行以下方式创建带矩阵 − 的 JS 径向渐变
var canvas1 = document.getElementById("canvas"); //canvas1 变量用于标识给定的画布
var ctx1 = canvas.getContext("2d"); //这用于告知上下文是 2D
var gradient1 = ctx1.createRadialGradient(100/horizontalScale, 100/verticalScale, 100,
100/horizontalScale,100/verticalScale,0); //这将使用给定的画布上下文创建渐变
gradient1.addColorStop(1,"green"); //渐变中添加新颜色绿色
gradient1.addColorStop(0,"red"); //渐变中添加新颜色红色
ctx1.scale(horizontalScale, verticalScale); //上下文矩阵 ctx1 根据水平和垂直比例缩小
ctx1.fillStyle = gradient; //绘制给定渐变
ctx1.fillRect(0,0, 100/horizontalScale, 100/verticalScale); //矩形根据比例拉伸
ctx1.setTransform(0,1,1,0,1,1); //重置上下文矩阵
canvas {
background-color: purple;
}
//画布以紫色背景色绘制
<canvas id = "canvas" width = "300" height = "300"></canvas>
相关文章
有用资源
html 参考教程 - 该教程包含有关 html 的更多信息:https://www.cainiaomax.com/html/
