canvas学习笔记(1)

最新推荐文章于 2021-05-07 19:49:23 发布

众生皆苦唯有我甜

最新推荐文章于 2021-05-07 19:49:23 发布

阅读量184

点赞数

分类专栏： canvas 文章标签： canvas js

本文链接：https://blog.csdn.net/Genius_cxx/article/details/102723312

版权

canvas 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

canvas理解

HTML5 标签用于绘制图像（通过脚本，通常是 JavaScript）。
不过，元素本身并没有绘制能力（它仅仅是图形的容器） - 您必须使用脚本来完成实际的绘图任务。
getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。

虽然之前对canvas有一定的了解，但是并没有专门去系统化的学习过这一门技术。所以从基础学起

基础知识小节（颜色阴影，元素位置渲染）

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>Document</title>
	</head>
	<body>
		<canvas id="canvas1" width="300" height="150" style="border:1px solid #d3d3d3;">
			当前不支持canvas
		</canvas>
		<script>
			//画板函数
			function draw() {
				//获取canvas 
				const canvas = document.getElementById('canvas1');
				//检测支持性
				if (!canvas.getContext) return;
				//获取2d上下文对象
				const ctx = canvas.getContext('2d');
				//设置阴影大小 设置或返回用于阴影的模糊级别
				ctx.shadowBlur = 10;
				//设置或返回阴影距形状的水平距离
				ctx.shadowOffsetX = 10;
				//设置或返回阴影距形状的数值距离
				ctx.shadowOffsetY = 10;
				//设置阴影颜色 设置或返回用于阴影的颜色
				ctx.shadowColor = "black";
				//放射状/圆形渐变进行填充： x起 y起 半径始 x终 y终 半径终
				var grd=ctx.createRadialGradient(75,50,5,90,60,100);
				grd.addColorStop(0,"orange");
				grd.addColorStop(0.5,"red");
				grd.addColorStop(1,"pink");
				//创建线性渐变（用在画布内容上） x起 y起 x终 y终
				var my_gradient = ctx.createLinearGradient(0, 0, 170, 0);
				//0-1过程 颜色
				my_gradient.addColorStop(0, "orange");
				my_gradient.addColorStop(0.5, "yellow");
				my_gradient.addColorStop(1, "red");
				//设置或返回用于填充绘画的颜色、渐变或模式
				ctx.fillStyle = grd;
				// ctx.fillStyle = my_gradient;
				//绘制“被填充”的矩形 x y width height

				ctx.fillRect(20, 20, 100, 70);
			}
			draw();
		</script>
	</body>
</html>

学习中…后续更新

众生皆苦唯有我甜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas学习笔记(1)

canvas理解HTML5 标签用于绘制图像（通过脚本，通常是 JavaScript）。不过，元素本身并没有绘制能力（它仅仅是图形的容器） - 您必须使用脚本来完成实际的绘图任务。getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。虽然之前对canvas有一定的了解，但是并没有专门去系统化的学习过这一门技术。所以从基础学起基础知识小节（颜色阴影...
复制链接

扫一扫

专栏目录