canvas标签

最新推荐文章于 2023-04-18 20:31:46 发布

雷碎

最新推荐文章于 2023-04-18 20:31:46 发布

阅读量948

点赞数

分类专栏：新人路途文章标签： canvas标签

本文链接：https://blog.csdn.net/weixin_44540155/article/details/91348547

版权

新人路途专栏收录该内容

33 篇文章 1 订阅

订阅专栏

文献种类：专题技术文献；

                        <canvas>标签

 开发工具与关键技术：VS/HTML/JS
 作者：吴泽锋
 撰写时间：2019年5月28日

3、<canvas> 标签：定义图形，比如图表和其他图像。
	HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。
	因为 canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成：
		该标签只是图形容器，画布是一个矩形区域，使用者可以控制其每一像素，但必须使用脚本来绘制图形。
	canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
	语法：<canvas height="pixels" />
	注释：Internet Explorer 8 以及更早的版本不支持 <canvas> 标签。
	提示：如果无法显示出画布将会显示出该标签之间内的文本值；

	例：通过 canvas 元素来显示一个红色的矩形：
      <canvas id="Canvas">your browser does not support the canvas tag </canvas>
	  <script type="text/javascript">
			JavaScript 使用 id 来寻找 canvas 元素：
         	   var canvas=document.getElementById('Canvas');
			然后，创建 context 对象：
        	    var ctx=canvas.getContext('2d');
			getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
			下面的两行代码绘制一个红色的矩形：
			fillStyle 方法将其染成红色，fillRect 方法规定了形状、位置和尺寸。
			              ctx.fillStyle='#FF0000';
			              ctx.fillRect(0,0,80,150);
	   </script>
  	  fillRect值：x，y，w，h；
	  意思是：在画布上绘制 80x150 的矩形，从左上角开始 (0,0)。

	属性               值                描述
	height             pixels            设置 canvas 的高度。
	width              pixels            设置 canvas 的宽度。

	例：如何通过重设 width 或 height 属性来清空画布（使用 JavaScript）。 
	 <canvas id="Canvas" width="200" height="200" style="border:1px solid">
	           Your browser does not support the canvas element.
     </canvas>
     <script type="text/javascript">
          var c=document.getElementById("Canvas");   var cxt=c.getContext("2d");
          cxt.fillStyle="#92B901";     cxt.fillRect(50,50,100,100);
    	  function clearCanvas()  {    c.height=c.height;    }
      </script>   <br />
	  <button onclick="clearCanvas()">清空画布</button>
	提示：每当画布的高度或宽度被重设时，画布内容就会被清空（请看页面底部的例子）。
	例：把鼠标悬停在下面的矩形上可以看到坐标；
	<head>
	        <style type="text/css">
	            body {   font-size: 70%;  font-family: verdana,helvetica,arial,sans-serif;  
	margin:0px;  }
	        </style>
	        <script type="text/javascript">
	          function cnvs_GetCoordinates(e){   x=e.clientX;    y=e.clientY;
	              document.getElementById("XYcoordinates").innerHTML="Coordinates: ("+x+","+y+")";
	          }
	          function cnvs_ClearCoordinates(){document.getElementById("XYcoordinates").innerHTML="";}
	        </script>
	</head>
	<body>
	        <p>把鼠标悬停在下面的矩形上可以看到坐标：</p>
	        <div id="coordiv" style="float:left;width:199px;height:99px;border:1px solid #c3c3c3" onmousemove="cnvs_GetCoordinates(event)" onmouseout="cnvs_ClearCoordinates()"></div>
	        <br /><br /><br />
	        <div id="XYcoordinates"></div>
	</body>
	画布的 X 和 Y 坐标用于在画布上对绘画进行定位。应为截图原因，所以鼠标无法出现；

在这里插入图片描述

	例：线条：通过指定从何处开始，在何处结束，来绘制一条线：
	<canvas id="Canvas" width="200" height="100" style="border:1px solid #c3c3c3;">
	        Your browser does not support the canvas element.
	    </canvas>
	    <script type="text/javascript">
	        var c=document.getElementById("Canvas");    var cxt=c.getContext("2d");
	        cxt.moveTo(10,10);    cxt.lineTo(150,50);
	        cxt.lineTo(10,50);    cxt.stroke();
	</script>

在这里插入图片描述

	例：圆形：通过规定尺寸、颜色和位置，来绘制个圆：
	<canvas id="Canvas" width="100" height="50" style="border:1px solid #c3c3c3;">
	        Your browser does not support the canvas element.
	    </canvas>
	    <script type="text/javascript">
	        var c=document.getElementById("Canvas");       var cxt=c.getContext("2d");
	        cxt.fillStyle = "#c3c3c3";                     cxt.beginPath();
	        cxt.arc(70, 18, 15, 0, Math.PI * 2, true);核心：Math.PI * 2 控制形状：圆形
	        cxt.arc(10, 9, 7.5, 0, Math.PI * 2, true);     cxt.closePath();
	        cxt.fill();
	</script>

在这里插入图片描述

	例：渐变：通过个人指定的颜色来绘制渐变背景；
	<canvas id="Canvas" width="175" height="60" style="border:1px solid #c3c3c3;">
	        Your browser does not support the canvas element.
    </canvas>
    <script type="text/javascript">
        var c=document.getElementById("Canvas");   var cxt=c.getContext("2d");
        var grd=cxt.createLinearGradient(0,0,150,50);
        grd.addColorStop(0,"#fff");     grd.addColorStop(1,"#000");
        cxt.fillStyle=grd;     cxt.fillRect(0,0,175,50);
	</script>

在这里插入图片描述

	例：图像：把一副图像放置在画布上；
	<canvas id="Canvas" width="445" height="250" style="border:1px solid #c3c3c3;">
	        Your browser does not support the canvas element.
    </canvas>
    <script type="text/javascript">
        var c=document.getElementById("Canvas");     var cxt=c.getContext("2d");
        var img=new Image();     img.src="/Content/images/timg.jpg";
        cxt.drawImage(img,0,0);
	</script>
	如果在代码没有出错的前提下，图像无法显示，说明图像路径有误；img.src="~/Content/images/timg.jpg";
	这样是错误的输入。
	
	借鉴于W3CSchool文档；

雷碎

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
canvas标签

文献种类：专题技术文献； <canvas>标签开发工具与关键技术：VS/HTML/JS 作者：吴泽锋撰写时间：2019年5月28日3、<canvas> 标签：定义图形，比如图表和其他图像。 HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。因为 canvas 元素本身是没有...
复制链接

扫一扫