数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会研究
时装设计
法学在 HTML 中使用矩阵创建 JS 径向渐变
使用矩阵创建 JS 径向渐变的方式如下。可以尝试运行以下方式以创建带有矩阵的 JS 径向渐变 -
var canvas1 = document.getElementById("canvas"); //canvas1 variable to identify given canvas
var ctx1 = canvas.getContext("2d"); //This is used to tell context is 2D
var gradient1 = ctx1.createRadialGradient(100/horizontalScale, 100/verticalScale, 100,
100/horizontalScale,100/verticalScale,0); //This will create gradient with given canvas context
gradient1.addColorStop(1,"green"); //New color green is added to gradient
gradient1.addColorStop(0,"red"); //New color red is added to gradient
ctx1.scale(horizontalScale, verticalScale); //Context matrix ctx1 is shrinked according to horizaontal
and vertical scale
ctx1.fillStyle = gradient; //Given gradient is drawn
ctx1.fillRect(0,0, 100/horizontalScale, 100/verticalScale); //Rectangle is stretched according to scale
ctx1.setTransform(0,1,1,0,1,1); //Context matrix is reset
canvas {
background-color: purple;
}
//Canvas is drawn with background color purple
<canvas id = "canvas" width = "300" height = "300"></canvas>
更新时间: 2020 年 6 月 2 日
192 次观看
广告