精华内容
下载资源
问答
  • NULL 博文链接:https://careless527.iteye.com/blog/1134880
  • canvas标签

    2019-06-08 22:44:54
    canvas>标签 开发工具与关键技术:VS/HTML/JS 作者:吴泽锋 撰写时间:2019年5月28日 3、<canvas> 标签:定义图形,比如图表和其他图像。 HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。 ...
    文献种类:专题技术文献;
    
                            <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文档;
    
    展开全文
  • 主要介绍了HTML页面中添加Canvas标签示例,本文直接给出示例代码,并讲解了一些重要属性和js访问方法,需要的朋友可以参考下
  • 你玩过刮刮卡么?一不小心可以中奖的那种。...我们只需要在页面中加入canvas标签元素,其他的就看javascript的了。注意canvas元素是HTML5才有的元素,运行在支持HTML5的现代浏览器上。 复制代码代码如
  • 使用HTML5 canvas 标签进行图片裁剪、旋转、缩放示例代码
  • html5中的canvas标签

    千次阅读 2019-04-28 15:46:51
    canvas基本用法 什么是canvas(画布) ...我们可以使用标签来定义一个canvas元素 ----->使用标签时,建议要成对出现,不要使用闭合的形式。 ----->canvas元素默认具有高宽 width: 300px h...

    个人blog,欢迎关注加收藏

    canvas基本用法

    1. 什么是canvas(画布)
    • <canvas>是 HTML5 新增的元素,可用于通过使用JavaScript中的脚本来绘制图形
      例如,它可以用于绘制图形,创建动画。<canvas>最早由Apple引入WebKit
      我们可以使用<canvas>标签来定义一个canvas元素
      ----->使用<canvas>标签时,建议要成对出现,不要使用闭合的形式。
      ----->canvas元素默认具有高宽
      width: 300px
      height:150px
    1. 替换内容
    • <canvas>很容易定义一些替代内容。由于某些较老的浏览器(尤其是IE9之前的IE浏览器)
      不支持HTML元素"canvas",
      但在这些浏览器上你应该要给用户展示些替代内容。
      这非常简单:我们只需要在<canvas>标签中提供替换内容就可以。
      —>支持<canvas>的浏览器将会忽略在容器中包含的内容,并且只是正常渲染canvas。
      —>不支持<canvas>的浏览器会显示代替内容
    <!-- 浏览器支持canvas则不显示span标签内容,不支持canvas则显示span标签内容 -->
    <canvas id="test" width="300" height="300">
    	<span>您的浏览器不支持画布元素 请您换成萌萌的谷歌</span>
    </canvas>
    		
    
    1. canvas标签的两个属性
      <canvas> 看起来和 <img>元素很相像,唯一的不同就是它并没有 src 和 alt 属性。
      实际上,<canvas> 标签只有两个属性—— width和height。这些都是可选的。
      当没有设置宽度和高度的时候,canvas会初始化宽度为300像素和高度为150像素。
      画布的高宽
      html属性设置width height时只影响画布本身不影画布内容
      css属性设置width height时不但会影响画布本身的高宽,还会使画布中的内容等比例缩放(缩放参照于画布默认的尺寸)

    2. 渲染上下文
      <canvas>元素只是创造了一个固定大小的画布,要想在它上面去绘制内容,
      我们需要找到它的渲染上下文
      <canvas>元素有一个叫做 getContext() 的方法,这个方法是用来获得渲染上下文(画笔)和它的绘画功能。

    getContext()只有一个参数,上下文的格式
    	----->获取方式
    		  var canvas = document.getElementById('box');
    		  var ctx = canvas.getContext('2d');
    		  
    	----->检查支持性
    		  var canvas = document.getElementById('tutorial');
    		  if (canvas.getContext){//判断是否支持canvas,存在画笔
    				var ctx = canvas.getContext('2d');
    			} 
    

    canvas绘制矩形

    HTML中的元素canvas只支持一种原生的图形绘制:矩形。所有其他的图形的绘制都至少需要生成一条路径
    
    1. 绘制矩形
      canvas提供了三种方法绘制矩形:
      ---->绘制一个填充的矩形(填充色默认为黑色)
      fillRect(x, y, width, height):x轴偏移量,y轴偏移量,宽,高,不用加px作为单位
      ---->绘制一个矩形的边框(空心矩形)(默认边框为:一像素实心黑色)
      strokeRect(x, y, width, height):x轴偏移量,y轴偏移量,宽,高,不用加px作为单位
      ---->清除指定矩形区域(填充矩形,填充色为底色),让清除部分完全透明。
      clearRect(x, y, width, height):x轴偏移量,y轴偏移量,宽,高,不用加px作为单位

      x与y指定了在canvas画布上所绘制的矩形的左上角(相对于原点)的坐标。
      width和height设置矩形的尺寸。(存在边框的话,边框会在width上占据一个边框的宽度,height同理)

    2. strokeRect时,边框像素渲染问题
      按理渲染出的边框应该是1px的,
      canvas在渲染矩形边框时,边框宽度是平均分在偏移位置的两侧。
      context.strokeRect(10,10,50,50)
      :边框会渲染在10.5 和 9.5之间,浏览器是不会让一个像素只用自己的一半的
      相当于边框会渲染在9到11之间
      context.strokeRect(10.5,10.5,50,50)
      :边框会渲染在10到11之间

    3. 添加样式和颜色

      • fillStyle :设置图形的填充颜色。
      • strokeStyle :设置图形轮廓的颜色。
        默认情况下,线条和填充颜色都是黑色(CSS 颜色值 #000000)
      • lineWidth : 这个属性设置当前绘线的粗细。属性值必须为正数。描述线段宽度的数字。 0、 负数、 Infinity 和 NaN 会被忽略。默认值是1.0。
    4. lineWidth & 覆盖渲染

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style type="text/css">
    			*{
    				margin: 0;
    				padding: 0;
    			}
    			html,body{
    				height: 100%;
    				overflow: hidden;
    			}
    			body{
    				background: pink;
    			}
    			#test{
    				background: gray;
    				position: absolute;
    				left: 0;
    				top: 0;
    				right: 0;
    				bottom: 0;
    				margin: auto;
    			}
    		</style>
    	</head>
    	<body>
    		<canvas id="test" width="300" height="300">
    			<span>您的浏览器不支持画布元素 请您换成萌萌的谷歌</span>
    		</canvas>
    	</body>
    	<script type="text/javascript">
    //		同步思维  有别于浏览器本身的渲染机制:浏览器渲染模式,由于js解析非常快,解析速度远大于渲染速度,所以js操作渲染样式的代码位置放在渲染前后都无所谓,但canvas解析和渲染是同时的,在渲染之前必须先告诉渲染样式
    		window.onload=function(){
    			//拿到画布
    			var canvas = document.querySelector("#test");
    			if(canvas.getContext){
    				var ctx = canvas.getContext("2d");
    				
    				//在canvas渲染极快,所以渲染前要先告诉canvas渲染的方式,比如颜色,粗细等等,canvas才能按你指定的渲染方式进行渲染
    				ctx.fillStyle="deeppink";//填充颜色
    				ctx.strokeStyle="pink";//线条颜色
    				ctx.lineWidth=25;//线条粗细
    				ctx.lineJoin="round";//设定线条与线条间接合处的样式(默认是 miter)round : 圆角 ,bevel : 斜角,miter : 直角
    				
    				//注意不加单位
    				//填充的矩形
    				
    				//带边框的矩形  
    				// 100	: 99.5 --- 100.5(99-101)
    				// 100.5: 100  --- 101 
    				
    				ctx.strokeRect(100,100,100,100)
    				ctx.fillRect(0,0,100,100)
    //				ctx.clearRect(100,100,100,100)
    				
    				
    				
    			}
    		}
    		
    		
    	</script>
    </html>
    
    
    1. lineJoin
      设定线条与线条间接合处的样式(默认是 miter)
      round : 圆角
      bevel : 斜角
      miter : 直角

    canvas绘制路径

    图形的基本元素是路径。路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。
    

    步骤

    1. 首先,你需要创建路径起始点。
    2. 然后你使用画图命令去画出路径
    3. 之后你把路径封闭。
    4. 一旦路径生成,你就能通过描边或填充路径区域来渲染图形。
      <!DOCTYPE html>
      <html>
      	<head>
      		<meta charset="UTF-8">
      		<title></title>
      		<style type="text/css">
      			*{
      				margin: 0;
      				padding: 0;
      			}
      			html,body{
      				height: 100%;
      				overflow: hidden;
      			}
      			body{
      				background: pink;
      			}
      			#test{
      				background: gray;
      				position: absolute;
      				left: 0;
      				top: 0;
      				right: 0;
      				bottom: 0;
      				margin: auto;
      			}
      		</style>
      	</head>
      	<body>
      		<canvas id="test" width="300" height="300">
      			<span>您的浏览器不支持画布元素 请您换成萌萌的谷歌</span>
      		</canvas>
      	</body>
      	<script type="text/javascript">
      		window.onload=function(){
      			//querySelector身上有坑
      			//拿到画布
      			var canvas = document.querySelector("#test");
      			if(canvas.getContext){
      				var ctx = canvas.getContext("2d");
      				
      				ctx.strokeStyle="deeppink";//线颜色
      				ctx.lineWidth=10;//线宽
      				
      				ctx.moveTo(100,100);//起点
      				ctx.lineTo(100,200);//线条路径至的终点
      				ctx.lineTo(200,200);//线条路径至的终点
      				//ctx.closePath();//闭合路径
      				//ctx.stroke();//线条描绘
      				
      				
      
      				//fill方法会自动合并路径
      				ctx.fill();//填充描绘
      				
      			}
      		}
      		
      		
      	</script>
      </html>
      
      

    绘制三角形

    1. beginPath()
      新建一条路径,生成之后,图形绘制命令被指向到路径上准备生成路径。---->多条路径时,是必须的!!!

      生成路径的第一步叫做beginPath()。本质上,路径是由很多子路径构成,这些子路径都是在一个列表中,
      所有的子路径(线、弧形、等等)构成图形。而每次这个方法调用之后,列表清空重置,
      然后我们就可以重新绘制新的图形。

    2. moveTo(x, y)
      将笔触移动到指定的坐标x以及y上(抬起画笔)
      当canvas初始化或者beginPath()调用后,你通常会使用moveTo()函数设置起点

    3. lineTo(x, y)
      将笔触移动到指定的坐标x以及y上
      绘制一条从当前位置到指定x以及y位置的直线

    4. closePath()
      闭合路径之后图形绘制命令又重新指向到上下文中。
      闭合路径closePath(),不是必需的。这个方法会通过绘制一条从当前点到开始点的直线来闭合图形。
      如果图形是已经闭合了的,即当前点为开始点,该函数什么也不做
      当你调用fill()函数时,所有没有闭合的形状都会自动闭合,所以你不需要调用closePath()函数。
      但是调用stroke()时不会自动闭合

    5. stroke()
      通过线条来绘制图形轮廓。
      不会自动调用closePath()

    6. fill()
      通过填充路径的内容区域生成实心的图形。
      自动调用closePath()

    绘制矩形

    1. rect(x, y, width, height)
      绘制一个左上角坐标为(x,y),宽高为width以及height的矩形。
      当该方法执行的时候,moveTo()方法自动设置坐标参数(0,0)。
      也就是说,当前笔触自动重置会默认坐标
    方法一:
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style type="text/css">
    			*{
    				margin: 0;
    				padding: 0;
    			}
    			html,body{
    				height: 100%;
    				overflow: hidden;
    			}
    			body{
    				background: pink;
    			}
    			#test{
    				background: gray;
    				position: absolute;
    				left: 0;
    				top: 0;
    				right: 0;
    				bottom: 0;
    				margin: auto;
    			}
    		</style>
    	</head>
    	<body>
    		<canvas id="test" width="300" height="300">
    			<span>您的浏览器不支持画布元素 请您换成萌萌的谷歌</span>
    		</canvas>
    	</body>
    	<script type="text/javascript">
    		window.onload=function(){
    			//querySelector身上有坑
    			//拿到画布
    			var canvas = document.querySelector("#test");
    			if(canvas.getContext){
    				var ctx = canvas.getContext("2d");
    				ctx.rect(50,50,100,100);
    //				ctx.fill();
    				ctx.stroke();
    			}
    		}
    		
    		
    	</script>
    </html>
    
    
    方法二:
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style type="text/css">
    			*{
    				margin: 0;
    				padding: 0;
    			}
    			html,body{
    				height: 100%;
    				overflow: hidden;
    			}
    			body{
    				background: pink;
    			}
    			#test{
    				background: gray;
    				position: absolute;
    				left: 0;
    				top: 0;
    				right: 0;
    				bottom: 0;
    				margin: auto;
    			}
    		</style>
    	</head>
    	<body>
    		<canvas id="test" width="300" height="300">
    			<span>您的浏览器不支持画布元素 请您换成萌萌的谷歌</span>
    		</canvas>
    	</body>
    	<script type="text/javascript">
    //		同步思维  有别于浏览器本身的渲染机制
    		window.onload=function(){
    			//querySelector身上有坑
    			//拿到画布
    			var canvas = document.querySelector("#test");
    			if(canvas.getContext){
    				var ctx = canvas.getContext("2d");
    				
    				ctx.fillStyle="deeppink";
    				ctx.strokeStyle="pink";
    				ctx.lineWidth=25;
    				ctx.lineJoin="round";
    				
    				//注意不加单位
    				//填充的矩形
    				
    				//带边框的矩形  
    				// 100	: 99.5 --- 100.5(99-101)
    				// 100.5: 100  --- 101 
    				
    				ctx.strokeRect(100,100,100,100)
    				ctx.fillRect(0,0,100,100)
    //				ctx.clearRect(100,100,100,100)
    				
    				
    				
    			}
    		}
    		
    		
    	</script>
    </html>
    
    

    lineCap

    1. lineCap 是 Canvas 2D API 指定如何绘制每一条线段末端的属性
      有3个可能的值,分别是:
      butt :线段末端以方形结束。
      round :线段末端以圆形结束
      square:线段末端以方形结束,但是增加了一个宽度和线段相同,高度是线段厚度一半的矩形区域
      默认值是 butt。
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style type="text/css">
    			*{
    				margin: 0;
    				padding: 0;
    			}
    			html,body{
    				height: 100%;
    				overflow: hidden;
    			}
    			body{
    				background: pink;
    			}
    			#test{
    				background: gray;
    				position: absolute;
    				left: 0;
    				top: 0;
    				right: 0;
    				bottom: 0;
    				margin: auto;
    			}
    		</style>
    	</head>
    	<body>
    		<canvas id="test" width="300" height="300">
    			<span>您的浏览器不支持画布元素 请您换成萌萌的谷歌</span>
    		</canvas>
    	</body>
    	<script type="text/javascript">
    		window.onload=function(){
    			//querySelector身上有坑
    			//拿到画布
    			var canvas = document.querySelector("#test");
    			if(canvas.getContext){
    				var ctx = canvas.getContext("2d");
    				
    				ctx.strokeStyle="pink";
    				ctx.lineWidth=10;
    				ctx.lineCap="round";//线的两端都是圆形的
    				
    				ctx.moveTo(100,100);
    				ctx.lineTo(100,200);
    				ctx.stroke();
    				
    			}
    		}
    		
    		
    	</script>
    </html>
    
    

    save:入栈,样式容器

    1. save() 是 Canvas 2D API 通过将当前状态放入栈中,保存 canvas 全部状态的方法:将当前的样式保存进入栈结构

      保存到栈中的绘制状态有下面部分组成:
      当前的变换矩阵。
      当前的剪切区域。
      当前的虚线列表.
      以下属性当前的值:
      strokeStyle,
      fillStyle,
      lineWidth,
      lineCap,
      lineJoin…

    restore:弹栈,样式容器

    1. restore() 是 Canvas 2D API 通过在绘图状态栈中弹出顶端的状态,将 canvas 恢复到最近的保存状态的方法。
      如果没有保存状态,此方法不做任何改变。
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style type="text/css">
    			*{
    				margin: 0;
    				padding: 0;
    			}
    			html,body{
    				height: 100%;
    				overflow: hidden;
    			}
    			body{
    				background: pink;
    			}
    			#test{
    				background: gray;
    				position: absolute;
    				left: 0;
    				top: 0;
    				right: 0;
    				bottom: 0;
    				margin: auto;
    			}
    		</style>
    	</head>
    	<body>
    		<canvas id="test" width="300" height="300">
    			<span>您的浏览器不支持画布元素 请您换成萌萌的谷歌</span>
    		</canvas>
    	</body>
    	<script type="text/javascript">
    		window.onload=function(){
    			/*
    			1.路径容器
    				每次调用路径api时,都会往路径容器里做登记
    				调用beginPath时,清空整个路径容器
    			2.样式容器
    				每次调用样式api时,都会往样式容器里做登记
    				调用save时候,将样式容器里的状态压入样式栈
    				调用restor时候,将样式栈的栈顶状态弹出到样式样式容器里,进行覆盖
    			3.样式栈
    				调用save时候,将样式容器里的状态压入样式栈
    				调用restor时候,将样式栈的栈顶状态弹出到样式样式容器里,进行覆盖
    			*/
    			
    			var canvas = document.querySelector("#test");
    			if(canvas.getContext){
    				var ctx = canvas.getContext("2d");
    				
    				ctx.save();
    				//关于样式的设置
    				//save  restore成对出现
    				ctx.beginPath();
    				//关于路径
    				ctx.restore();
    				
    				
    				ctx.save();
    				//关于样式的设置
    				ctx.beginPath();
    				//关于路径
    				
    				ctx.fill();
    				ctx.restore();
    			}
    		}
    		
    		
    	</script>
    </html>
    
    

    签名

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style type="text/css">
    			*{
    				margin: 0;
    				padding: 0;
    			}
    			body{
    				background: gray;
    			}
    			#test{
    				position: absolute;
    				left: 0;
    				right: 0;
    				top: 0;
    				bottom: 0;
    				margin: auto;
    				background:white;
    			}
    		</style>
    	</head>
    	<body>
    		<canvas id="test" width="500" height="500"></canvas>
    	</body>
    	<script type="text/javascript">
    		
    		window.onload=function(){
    			
    			var canvas =document.getElementById("test");
    			if(canvas.getContext){
    				var ctx = canvas.getContext("2d");
    			}
    			//鼠标落下
    			canvas.onmousedown=function(ev){
    				ev = ev || window.event;
    				//兼容IE6及以下浏览器
    				if(canvas.setCapture){
    					canvas.setCapture();
    				}
    				//开始画图
    				ctx.beginPath();
    				//抬起画笔,且画笔以canvas的左上角的点为坐标点起始点
    				ctx.moveTo(ev.clientX -canvas.offsetLeft,ev.clientY -canvas.offsetTop);
    				
    				//鼠标移动
    				document.onmousemove=function(ev){
    					ctx.save();//保存初始状态
    					ctx.strokeStyle="pink";
    					ev = ev || event;
    					ctx.lineTo(ev.clientX -canvas.offsetLeft,ev.clientY -canvas.offsetTop);//签名即划线,画到鼠标移动的位置,此位置也是以canvas的左上角的点为坐标点起始点
    					ctx.stroke();//划线
    					ctx.restore();//清除样式,返回初始状态样式,这里即清除pink的线颜色
    				}
    				//鼠标抬起
    				document.onmouseup=function(){
    					document.onmousemove=document.onmouseup=null;
    					if(document.releaseCapture){
    						document.releaseCapture();
    					}
    				}
    				return false;
    			}
    			
    		}
    		
    	</script>
    </html>
    
    

    曲线

    角度与弧度的js表达式:radians=(Math.PI*degrees)/180。
    canvas绘制圆形

    度数范围
    arc(x, y, radius, startAngle, endAngle, anticlockwise):圆
    画一个以(x,y)为圆心的以radius为半径的圆弧(圆),从startAngle(起始弧度)开始到endAngle(终止弧度)结束,
    按照anticlockwise给定的方向(默认为顺时针)来生成。
    ture:逆时针
    false:顺时针

    	x,y为绘制圆弧所在圆上的圆心坐标
    	radius为半径
    	startAngle以及endAngle参数用弧度定义了开始以及结束的弧度。这些都是以x轴为基准
    	参数anticlockwise 为一个布尔值。为true时,是逆时针方向,否则顺时针方向。
    
    arcTo:圆弧
    arcTo(x1, y1, x2, y2, radius)
    根据给定的控制点和半径画一段圆弧
    肯定会从(x1 y1)  但不一定经过(x2 y2);(x2 y2)只是控制一个方向
    1. 必须用moveTo确定第一个点
    2. 实际是以三个点确定一个角度,以半径画圆,推进,形成圆弧
    

    在这里插入图片描述

    贝塞尔

    二次贝塞尔
    quadraticCurveTo(cp1x, cp1y, x, y)
    	绘制二次贝塞尔曲线,cp1x,cp1y为一个控制点,x,y为结束点。
    	1. 起始点为moveto时指定的点
    	2. 不需要指定半径
    	3. 圆弧必过moveTo指定的起始点和终止点
    

    在这里插入图片描述

    三次贝塞尔
    bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
    	绘制三次贝塞尔曲线,cp1x,cp1y为控制点一,cp2x,cp2y为控制点二,x,y为结束点。
    	1. 起始点为moveto时指定的点
    	2. 不需要指定半径
    	3. 圆弧必过moveTo指定的起始点和终止点
    

    在这里插入图片描述

    展开全文
  • 下面例子为用canvas标签画多条直线 复制代码代码如下: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns=”...
  • 本文实例讲述了JS基于HTML5的canvas...JS canvas标签制作色相球</title> </head> <body> <canvas></canvas> [removed] var canvas,ctx,max,p,count; [removed]=function(){ var a,b,r; canvas = do
  • 什么是Canvas <canvas> 是一个新的 HTML 元素,这个元素在 HTML5  中被定义。这个元素通常可以被用来在 HTML 页面中通过 JavaScript 进行绘制图形、合成图像等等操作,也可以用来做一些动画。当然,目前 ...
  • canvas标签的简单用法

    2019-01-28 21:24:13
    HTML canvas标签的简单实例 -首先知道canvas它是一个HTML标签是一个画布,是一个容器,可以使用JavaScript对它进行操作。 用它之前先做一些基本步骤:&lt;canvas id="mycanvas" height="450&...

    HTML canvas标签的简单实例

    -首先知道canvas它是一个HTML标签是一个画布,是一个容器,可以使用JavaScript对它进行操作。

    1. 用它之前先做一些基本步骤:<canvas id="mycanvas" height="450" width="450"></canvas>对这个标签取一个id
    2. var c = document.getElementById(“mycanvas”);//根据id取得画布var contxt = c.getContext(“2d”);//设置为2d画布
    3. 在这里我主要用它来构建的是一个五子棋棋盘,下面看看实例:先说明两个方法 moveTo(x,y) 动在画布中定义一个指定点,不创建线条,lineTo(x,y) 添加一个新点,在画布中创建从该点到最后指定点的线条
    			contxt.strokeStyle="darkgray";//这里设置线条的颜色
    			for (var i = 0; i < 15; i++) {
    				contxt.moveTo(15+30*i,15);//两个参数一个是x轴一个y轴坐标
    				contxt.lineTo(15+30*i,435);
    				contxt.stroke();
    				contxt.moveTo(15,15+30*i);
    				contxt.lineTo(435,15+30*i);
    				contxt.stroke();
    			}
    

    效果:
    在这里插入图片描述
    以上就是canvas标签的一个简单的实例,想要了解更多canvas标签的属性方法可以上
    http://www.w3school.com.cn/tags/html_ref_canvas.asp 学习。

    展开全文
  • 有些在线图片网站,进行图像处理比如去除背景后,结果图片是以html5里canvas标签的形式显示出来的,我们没有办法通过右键点击图片然后下载的方式去保存到本地。 [外链图片转存失败,源站可能有防盗链机制,建议将图片...

    有些在线图片网站,进行图像处理比如去除背景后,结果图片是以html5里canvas标签的形式显示出来的,我们没有办法通过右键点击图片然后下载的方式去保存到本地。

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2MCDwD0b-1576403460274)(https://user-images.githubusercontent.com/5669954/70596472-f8fbbc80-1c20-11ea-89f8-41877854ea9f.png)]

    此时使用Chrome开发者工具,定位到canvas标签,

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CmxUcgp9-1576403460276)(https://user-images.githubusercontent.com/5669954/70596466-f6996280-1c20-11ea-8516-1a3ff8d4c3bc.png)]

    Chrome开发者工具console里的$0代表当前选中的canvas元素。
    执行下面的JavaScript:

    var image = new Image();
    image.src = $0.toDataURL("image/png");
    

    clipboard3,3

    var binary = pageData.replace("image/jpeg", "image/octet-stream");
    var save_link = document. createElementNS ('http://www.w3.org/1999/xhtml,, 'a');
    save_link.href = binary;
    save_link.download = "1.jpg";
    var event = document.create("MouseEvents");
    event.initMouseEvent('click', true, false, window, o, o, o, e, o, false, false, false, false, o, null);
    save_link.dispatchEvent(event); //触发事件
    

    clipboard4,4

    图片下载成功:

    clipboard5,5

    要获取更多Jerry的原创文章,请关注公众号"汪子熙":
    公众号截图

    展开全文
  • HTML之Canvas标签及对应属性、API详解

    千次阅读 2016-06-14 10:37:26
    自己也是借了几本书,想深刻了解一下,翻书一看,又惊又喜,这不是在大学还学过半年呢嘛,毕业设计就是和这个网页设计相关的,正好,前边几章大致翻阅一下复习,着重看了后边的章节,今天看了一个canvas标签,感觉挺...
  • canvas的创建分为两种  一种是在html页面中创建  <Canvas class="canvas" width="200px" height="200px"></canvas>  一种是在js文件中用js脚本创建  var canvas_widht=200, canvas_height=200; ...
  • 实现效果: html5 canvas文字标签云3D旋转动画特效,在企业网站中加号是哪个这个的效果,我觉得也还是很不错的一个特效吧,php中文网推荐大家下载!
  • <canvas> 标签定义图形,比如图表和其他图像。 <canvas> 标签只是图形容器,您必须使用脚本来绘制图形。 实例 如何通过 canvas 元素来显示一个红色的矩形: <canvas id=myCanvas></canvas> [removed] var canvas=...
  • HTML5-canvas标签结合简单实例讲解

    千次阅读 2018-06-28 19:55:51
    元素是HTML5中的新元素,该标签只是图形容器,需要使用脚本语言来绘制图形。   浏览器支持 Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持 元素. 注意: Internet Explorer 8 及更早 IE 版本的...
  • NULL 博文链接:https://onestopweb.iteye.com/blog/2316338
  •  初学红宝书中的canvas标签,在学到drawImage方法的时候,根据书上的代码敲了一遍但在自己的canvas中显示不出图像。  书中代码: var image=document.images[0]; context.drawImage(image,10,10);   照着敲到了...
  • 1、video视频标签 html5定义了新的标签<video>来播放视频文件,如果需要播放由<video></video>包围的视频文件,具体操作如下: WebDriver driver = new FirefoxDriver(); driver.get(...
  • 用到了html5 的video标签 调用摄像头拍照后在canvas标签中显示 利用jquery的jcrop插件对拍摄的照片进行剪切 预览 design里有jcrop的demo 还有.php的实现代码 .NET工程里有 C# 和 .htm版的 反转还有些问题 剪切能实现...
  • 画布数学游戏 使用Html的canvas标签使用Javascript创建的数学运算游戏。 屏幕截图
  • 我想爬取该图片上的文字标签,我应该怎么做 ![图片说明](https://img-ask.csdn.net/upload/201812/03/1543821557_205237.png)
  • Chartjs使用canvas标签的实现简洁HTML5图表

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 53,781
精华内容 21,512
关键字:

canvas标签