html——canvas

最新推荐文章于 2024-10-18 19:19:52 发布

taojYang

最新推荐文章于 2024-10-18 19:19:52 发布

阅读量123

点赞数

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

本文链接：https://blog.csdn.net/weixin_43293451/article/details/93488266

版权

html 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8"><!--文档的元数据，解决中文乱码-->
	<title>cnavas</title>
</head>
<body>
	<canvas id="myCnavas" width="200" height="100" style="border:1px solid #000;"></canvas><br />

	<script type="text/javascript">
		var c = document.getElementById("myCnavas");
		var ctx = c.getContext("2d");//创建context对象
		ctx.fillStyle = "#ff0000";//红
		ctx.fillRect(0,0,150,75);//定义矩形当前的填充方式

		ctx.moveTo(0,0);
		ctx.lineTo(200,100);
		ctx.stroke();//画对角线
	</script>
	<canvas id="myCnavas2" width="200" height="100px" style="border:1px solid #000;"></canvas><br />
	<script type="text/javascript">
		var c = document.getElementById("myCnavas2");
		var ctx = c.getContext("2d");
		ctx.beginPath();
		ctx.arc(100,50,40,0,2*Math.PI);//画圆
		ctx.stroke();
	</script>
	<canvas id="myCnavas3" width="200" height="100px" style="border:1px solid #000;"></canvas><br />
	<script type="text/javascript">
		var c = document.getElementById("myCnavas3");
		var ctx = c.getContext("2d");
		ctx.font = "30px Arial";
		ctx.fillText("Hello World",20,60);//绘制实心文本
		ctx.strokeText("Hello World",10,50);//绘制空心文本
	</script>
	<canvas id="myCnavas4" width="200" height="100px" style="border:1px solid #000;"></canvas>
	<script type="text/javascript">
		var c = document.getElementById("myCnavas4");
		var ctx = c.getContext("2d");
		//create gradient
		var grd = ctx.createLinearGradient(0,0,200,0);
		grd.addColorStop(0,"red");
		grd.addColorStop(1,"white");

		//fill with gradient
		ctx.fillStyle = grd;
		ctx.fillRect(10,10,150,80);
		
	</script>
	<canvas id="myCnavas5" width="200" height="100px" style="border:1px solid #000;"></canvas><br />
	<script type="text/javascript">
		var c = document.getElementById("myCnavas5");
		var ctx = c.getContext("2d");
		//create gradient
		var grd = ctx.createRadialGradient(75,50,5,75,50,100);//径向
		grd.addColorStop(0,"red")
		grd.addColorStop(1,"white");

		//fill with gradient
		ctx.fillStyle = grd;
		ctx.fillRect(10,10,150,80);
		
	</script>
	<img id="scream" src="http://www.w3cschool.cn/attachments/image/20160224/1456314599613373.jpg" alt="The Scream" >
	<canvas id="myCnavas6" width="300" height="300px" style="border:1px solid #000;"></canvas><br />
	<script type="text/javascript">
		var c = document.getElementById("myCnavas6");
		var ctx = c.getContext("2d");
		//create gradient
		var img = document.getElementById("scream");
		img.onload = function(){
			ctx.drawImage(img,10,10);
		}
		
	</script>

</body>
</html>