当前位置：网站首页>JS draw polar color gradient

JS draw polar color gradient

2022-06-30 00:09:00 【Nebula】

SVG How to do polar coordinate gradient

Native SVG This gradient is not supported . After making these gradients, vector graphics software should also convert gradients into bitmaps when exporting , Embedded in the vector diagram , But doing so may not solve the distortion problem caused by zooming in and out , Or make the vector graph too large . So how to use SVG Make this gradient ？

Usually SVG Gradients do this ：

<defs>
	<linearGradient id="grad1" x1="0%" y1="100%" x2="100%" y2="0%">
		<stop offset="0%" stop-color="#fff" stop-opacity="1"/>
		<stop offset="100%" stop-color="#000" stop-opacity="1"/>
	</linearGradient>
</defs>

From y=100%, x=0% Start to y=0%,x=100% At the end ,0% Color at #fff,100% Color at #000; That is, the lower left corner is white , The upper right corner is black .

whole SVG：

<svg width="100" height="100" version="1.1" xmlns="http://www.w3.org/2000/svg"><defs>
	<linearGradient id="grad1" x1="0%" y1="100%" x2="100%" y2="0%">
		<stop offset="0%" stop-color="#fff" stop-opacity="1"/>
		<stop offset="100%" stop-color="#000" stop-opacity="1"/>
	</linearGradient>
</defs>

<circle cx="50" cy="50" r="50" fill="url(#grad1)"/>
</svg>

But this is just a circular linear gradient, not We want the following gradient

Hey, you lost your picture

How to do rotation gradient

Can't do it because it doesn't support , That's only a detour , The key is CSS Nor does it support ……
It's not that there are no solutions , stay SVG Insert <foreignObject/> And use it directly JS stay <canvas/> Draw a gradient on the . If you draw it , It takes up less space and has no too many restrictions on the resolution , Unless the resolution is too high, it will take a long time to finish .

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style> canvas {
       width: 200px; height: 200px; } </style>
</head>

<body>
    <canvas id="canvas" width="100" height="100"></canvas>
</body>
<script> var canvas = document.getElementById('canvas'); var ctx = canvas.getContext("2d"); var w = canvas.width; var h = canvas.height; const CX = w / 2; const CY = h / 2; const OFFSET = 90;// Rotation Angle  const START = 90;// Start gradient angle  const RANGE = 180;// Gradient angle  const ROUNT = 360;// Around the corner  const WHITE = 255;// Brightest color value  for (var y = 0; y < h; y++) {
       for (var x = 0; x < w; x++) {
       var theta = (Math.atan2(y - CY, x - CX) + Math.PI) / (Math.PI * 2) * (ROUNT - 1); theta = (theta + OFFSET) % ROUNT + START theta = Math.max(Math.min(Math.floor(((ROUNT - 1) - theta) / RANGE * WHITE), WHITE), 0); var color = theta.toString(16); while (color.length < 2) {
       color = '0' + color } color = '#000000' + color ctx.fillStyle = color; ctx.fillRect(x, y, 1, 1) } } </script>

</html>
原网站

版权声明
本文为[Nebula]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/181/202206292353276517.html

边栏推荐

猜你喜欢

随机推荐