Canvas编辑：专注力-圆渐变_canvas画光点-优快云博客

本文链接：https://blog.youkuaiyun.com/yingmengxuepingbao/article/details/86677380

大家好：最近在研究专注力。写个html的图片-圆渐变的效果！备份一下，如图所示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>专注力训练-圆渐变</title>
	</head>
	<body >
	<div id="centerPoint" align="center">	
		<canvas id="concentration"  align="center" width="500" height="500" style="border:dashed 2px #CCC">
	您的浏览器不支持 HTML5 canvas 标签。</canvas>
	</div>
	<script>
		//画出中心黑点
	    var can = document.getElementById("concentration");
	    var cans = can.getContext('2d'); //得到画笔
	    cans.beginPath();//开始绘制新路径
	    //arc(x, y, radius, startAngle, endAngle, counterclockwise)：
	    //以(x,y)为圆心绘制一条弧线，弧线半径为radius，起始和结束角度（用弧度表示）分别为startAngle 和endAngle。最后一个参数表示startAngle 和endAngle 是否按逆时针方向计算，值为false表示按顺时针方向计算。
	    cans.arc(250,250,5,0,2*Math.PI);//参数1：左右移动；参数2：上下移动；参数3：大小；参数4：图形显示百分比
	    cans.closePath();
	    cans.fillStyle = 'black';
	    cans.fill();
		//圆渐变
		var canvas = document.getElementById('concentration');
	    var ctx = canvas.getContext('2d');
	    var grd = ctx.createRadialGradient(250,250,0,250,250,250);//ctx.createRadialGradient(100, 100, 5, 100, 100, 100);
	    grd.addColorStop(0, 'black');
	    grd.addColorStop(1, 'white');
	    //使用经向渐变
	    ctx.fillStyle = grd;
	    ctx.fillRect(0, 0, canvas.width, canvas.height);
	
	</script>
	</body>
</html>