学习绘制矩形以及渐变-学习Canvas第五天

最新推荐文章于 2024-05-02 19:35:29 发布

RisaSama

最新推荐文章于 2024-05-02 19:35:29 发布

阅读量141

点赞数

分类专栏：网页学习文章标签： HTML canvas

本文链接：https://blog.csdn.net/RisaSama/article/details/90202940

版权

网页学习专栏收录该内容

8 篇文章 0 订阅

订阅专栏

绘制矩形

var canvas = document.getElementById('canvas'),
	context = canvas.getContext('2d');

context. lineJoin = 'round';
context.lineWidth = 30;


context.font = '24px Helvetica';
context.fillText('Click anywhere to erase', 175, 40);
//开始位置，X,Y 宽高
context.strokeRect(75, 100, 200, 200);
context.fillRect(325, 100, 200, 200);

context.canvas.onmousedown = function (e){
	context.clearRect(0, 0, canvas.width,canvas.height);
}

context.strokeStyle = 'chocolate';
context.fillStyle = 'rgba(0, 0, 255, 0.5)';

context.strokeRect(75, 400, 200, 200);
context.fillRect(325, 400, 200, 200);

绘制渐变

var canvas = document.getElementById('canvas'),
	context = canvas.getContext('2d'),
	gradient = context.createLinearGradient(0, 0, canvas.width, 0);

gradient.addColorStop(0, 'blue');
gradient.addColorStop(0.25, 'white');
gradient.addColorStop(0.5, 'purple');
gradient.addColorStop(0.75, 'red');
gradient.addColorStop(1, 'yellow');

context.fillStyle = gradient;
context.fillRect(0, 0, canvas.width, canvas.height);

绘制放射渐变

//底圆 圆心以及半径 ------ 上圆 圆心半径
var canvas = document.getElementById('canvas'),
	context = canvas.getContext('2d'),
	gradient = context.createRadialGradient(canvas.width/2, canvas.height, 10, canvas.width/2 , 0, 100);

gradient.addColorStop(0, 'blue');
gradient.addColorStop(0.25, 'white');
gradient.addColorStop(0.5, 'purple');
gradient.addColorStop(0.75, 'red');
gradient.addColorStop(1, 'yellow');

context.fillStyle = gradient;
context.fillRect(0, 0, canvas.width, canvas.height);

HTML代码

<html>
<head>
	<title>Time Clock</title>
	<style>
		body{
			background: #dddddd;
		}
		#canvas{
			margin:10px;
			padding:10px;
			background:#ffffff;
			border:thin inset #aaaaaa;
		}
	</style>
</head>
<body>
	<canvas id='canvas' width='700' height='800'>
		Canvas not supported
	</canvas>
	<script src='js/drawcorner.js'></script>
</body>
</html>

RisaSama

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习绘制矩形以及渐变-学习Canvas第五天

绘制矩形var canvas = document.getElementById('canvas'), context = canvas.getContext('2d');context. lineJoin = 'round';context.lineWidth = 30;context.font = '24px Helvetica';context.fillText('Clic...
复制链接

扫一扫