小张与canvas

最新推荐文章于 2024-05-20 21:21:56 发布

小张小张_遇事不慌

最新推荐文章于 2024-05-20 21:21:56 发布

阅读量89

点赞数

分类专栏： # css/html 文章标签： html5

本文链接：https://blog.csdn.net/weixin_44617291/article/details/107516861

版权

css/html 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

冲冲冲

什么是Canvas

< canvas >是一个图形容器，必须用脚本（通常js完成图形）

绘制一个矩形

<body>
	<canvas id="demo" width="200" height="100" style="border:1px solid red;">
	</canvas>
	
	<script>
	var c=document.getElementById("demo");//获取<canvas>元素
	var x=c.getContext("2d");//getContext是内建的HTML5对象，拥有绘制的方法！必须创建context对象
	//在绘制黄色举行
	x.fillStyle="yellow";//fillStyle属性可以是颜色，渐变或者图案。默认是黑色
	x.fillRect(0,0,150,75);//fillRect(x,y,width,height)
	</script>

在这里插入图片描述

Canvas路径

在canvas上画线两种方法

moveTo(x,y)i定义线条开始坐标
lineTo(x,y)定义线条结束坐标
用ink方法，比如stroke（）

<body>
	<canvas id="demo" width="200" height="100" style="border: 1px solid black;">
	</canvas>
	<script>
		var c=document.getElementById("demo");
		var x=c.getContext("2d");
		c.moveTo(0,0);
		c.lineTo(200,100);
		c.stroke();

在这里插入图片描述

Canvas绘制圆形

arc(x,y,r,start,stop);

<body>
	<canvas id="demo" width="200" height="100" style="border:1px solid black;">
	</canvas>
	<script>
		var c=document.getElementById("demo");
		var x=c.getContext("2d");
		x.beginPath();
		x.arc(95,50,40,0,2*Math.PI);
		x.stroke();
	</script>
</body>

在这里插入图片描述

Canvas 文本

属性和方法：

font-定义字体
fillText(text,x,y)-实心文本
strokeText(text,x,y)-空心文本

<body>
	<canvas id="demo" width="200" height="100" style="border:1px solid black;">
	</canvas>
	<script>
		var c=document.getElementById("demo");
		var x=c.getContext("2d");
		x.font="30px Arial";
		x.fillText("Hello",10,50);
	</script>
</body>

在这里插入图片描述

<body>
	<canvas id="demo" width="200" height="100" style="border:1px solid black;">
	</canvas>
	<script>
		var c=document.getElementById("demo");
		var x=c.getContext("2d");
		x.font="30px Arial";
		x.strokeText("Hello",10,50);
	</script>
</body>

在这里插入图片描述

Cancas 渐变

两种渐变方式

createLinearGradient(x,y,x1,y1)-创建线条渐变
createRadialGradient(x,y,r,x1,y1,r1)-创建径向/圆渐变

<body>
	<canvas id="demo" width="200" height="100" style="border:1px solid black;">
	</canvas>
	<script>
		var c=document.getElementById("demo");
		var x=c.getContext("2d");
		//create gradient
		var g=x.createLinearGradient(0,0,200,0);
		g.addColorStop(0,"red");
		g.addColorStop(1,"white");
		
		//fill with gradient
		x.fillStyle=g;
		x.fillRect(10,10,150,80);
	</script>
</body>

在这里插入图片描述

小张小张_遇事不慌

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
小张与canvas

什么是Canvas< canvas >是一个图形容器，必须用脚本（通常js完成图形）绘制一个矩形<body> <canvas id="demo" width="200" height="100" style="border:1px solid red;"> </canvas> <script> var c=document.getElementById("demo");//获取<canvas>元素 var x=c.g
复制链接

扫一扫