image.png
<!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>
</head>
<body>
<div>
<canvas id="canvas" width="360" height="360">
您的浏览器不支持该功能，请升级你的浏览器。
</canvas>
</div>
<script>
let canvas = document.getElementById("canvas")
let img = new Image()
img.src = "https://asset.gign.xyz/cxk2.jpg"
img.onload = function() {
let ctx = canvas.getContext("2d")
ctx.save()
ctx.arc(40, 40, 30, 0, 2 * Math.PI);
ctx.clip()
ctx.drawImage(img, 10, 10, 60, 60);
ctx.restore()
ctx.font = "48px sans-serif"
ctx.save()
var grd = ctx.createLinearGradient(0, 0, canvas.width, 0); //渐变
grd.addColorStop("0", "magenta");
grd.addColorStop("0.5", "blue");
grd.addColorStop("1.0", "red");
ctx.strokeStyle = grd
ctx.strokeText("蔡徐坤", 100, 60);
ctx.restore()
}
</script>
</body>
</html>
网友评论