Html5 Canvas画图

最新推荐文章于 2021-06-15 19:19:08 发布

原创最新推荐文章于 2021-06-15 19:19:08 发布 · 732 阅读

0 ·

CC 4.0 BY-SA版权

html 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何利用HTML5的Canvas元素进行基本图形绘制，包括矩形、线条、圆形及带有线性渐变效果的矩形。通过JavaScript代码实现不同图形的绘制方法。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function init () {
				
				var c = document.getElementById("myCanvas");
				cxt = c.getContext("2d");
				//drawRect();
				//drawLine();
				//drawArc();
				drawGradient();
			}	
			//画矩形
			function drawRect () {
				cxt.fillStyle = "#FF0000";
				cxt.fillRect(0,0,150,75);
	
			}
			//画线
			function drawLine(){
				cxt.moveTo(10,10);
				cxt.lineTo(150,50);
				cxt.lineTo(10,50);
				cxt.stroke();
			}
			//画圆
			function drawArc(){
				cxt.fillStyle="#FF0000";
				cxt.beginPath();
				cxt.arc(70,18,15,0,Math.PI*2,true);
				cxt.closePath();
				cxt.fill();
			}
			//线性渐变矩形
			function drawGradient(){
				var grd = cxt.createLinearGradient(0,0,175,50);
				grd.addColorStop(0,"#FF0000");
				grd.addColorStop(1,"#00FF00");
				cxt.fillStyle =grd;
				cxt.fillRect(0,0,175,50);
			
			}
		
			window.addEventListener("load",init,false);
		</script>
		<style type="text/css">
			body{
				margin: 0px;
				font-size: 70%;
				font-family: verdana,helvetica,arial,sans-serif;
			}
		
		</style>
	</head>
	<body >
		<canvas id="myCanvas" width="200" height="100">Fallback content, in case the browser does not support Canvas.</canvas>

	</body>
</html>