html5canvas

标签：--   set   text   完成后   gre   image   刷新   页面   create   

1.HTML5用于图形绘制
通过js脚本来完成
标签只是图形容器
必须使用脚本来绘制图形

		步骤：
			1.创建一个画布canvas
			一个画布在网页中是一个矩形框  通过canvas元素来绘制
			默认情况下canvas元素没有边框和内容
			指定id  width height定义画布的宽高
			可以在HTML页面中使用多个canvas
			用style属性来添加边框
			
			
			2.用js绘图
			canvas元素本身是没有绘图能力的
			绘制工作都在js内部完成
			
			
			总结：
				1.画布默认没边框  可以在style里加边框
				2.先利用id找到canvas元素 var c = document.getElementById(‘id名‘)
				3.创建context对象 var ctx =  c.getContext(‘2d‘)
					getContext("2d") 对象是内建的 HTML5 对象，
					拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法
				4. ctx.fillStyle = ‘‘    可以是CSS颜色 渐变 或 图案
					fillStyle默认设置是#000000  黑色  这里是填充颜色
				5. ctx.fillRect(x,y,width,height)  定义了当前的填充方式  填充为矩形
					canvas是一个二维网格
					canvas坐标：左上角坐标：x ,y  画布的 X 和 Y 坐标用于在画布上对绘画进行定位。鼠标移动的矩形框上，显示定位坐标。
					矩形宽高： width , height
				  在画布上绘制宽高为width height的矩形  从坐标 x,y 开始
				  
				6.canvas路径  
					画线    定义开始坐标结束坐标 用stroke（）方法来绘制线条
						 1）线条开始坐标：moveTo(x,y) 
						 2）线条结束坐标：lineTo(x,y)
						 3）绘制线条的方法： stroke()
					 
					画圆 arc(x,y,r,start,stop)
						 1）ctx.beginPath()
							ctx.arc(50,50,10,0,0.5*Math.PI)
						 2)圆心坐标：x,y
						   半径：r
						   开始的位置：start  水平线右侧 0
						   结束的位置：stop   
								角度  0.5*Math.PI   90度
								1*Math.PI  下半圆
								2*Math.PI	整圆
							无论结束位置在哪  都是顺时针走的
					
					文本
						1.字体 font
						2.实心 fillText(text,x,y)
						3.空心 strokeText(text,x,y)
						ctx.font = ‘30px Arial‘;
						ctx.fillText(‘hhh‘,10,30)
						ctx.strokeText(‘hhh‘,10,60)
						ctx.stroke()
						x无所谓  y要考虑到字体本身的高度
						
					渐变
						渐变可以填充在矩形, 圆形, 线条, 文本等等, 各种形状可以自己定义不同的颜色
						1.createLinearGradient(x,y,x1,y1) - 创建线条渐变
						2.createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变
						3.使用渐变时 必须使用两种或两种以上的停止颜色
						4.指定颜色停止 addColorStop() 指定颜色停止  参数用坐标描述  0至1
						5.使用渐变 设置fillStyle或者strokeStyle的值为渐变  然后绘制形状
						如矩形 文本 或 一条线
						6.使用 createLinearGradient()
						var grd = ctx.createLinearGradient(0,0,50,0,80,0);
						grd.addColorStop(0,‘red‘);
						grd.addColorStop(0.5,‘white‘);
						grd.addColorStop(1,‘green‘);
						// 填充渐变
						ctx.fillStyle = grd;
						ctx.fillRect(10,10,50,80)
						
						//创建一个径向/圆渐变  ctx.createRadialGradient
						var grd = ctx.createRadialGradient(50,50,10,50,50,20,50,50,30);
						grd.addColorStop(0,‘red‘);
						grd.addColorStop(0.5,‘white‘);
						grd.addColorStop(1,‘green‘);
						// 填充渐变
						ctx.fillStyle=grd;
						ctx.fillRect(10,10,100,80);
					图像
						把一幅图像放置到画布上  drawlmage(image,x,y)      x,y是图片在画布上的起始位置坐标
						
						
						onload事件  框架/对象（Frame/Object）事件    一张页面或一幅图像完成加载。
						当页面载入完毕后执行Javascript代码：
						
							eg:
								function myFunction(){
									alert(‘页面加载完成‘)
								 }
								
							
						onload 事件会在页面或图像加载完成后立即发生。
						onload 通常用于  元素，在页面完全载入后(包括图片、css文件等等。)执行脚本代码。
						所有主要浏览器都支持 onload 事件
						以下 HTML 标签支持 onload :
						
						在  使用onload
						图片载入后立即弹出 "Image is loaded"
						
						
						function loadimg(){
							alert(‘加载了图片‘)
						}
						
						语法：
						在 HTML 中:
						在 JavaScript 中:window.onload=function(){SomeJavaScriptCode};
						参数	描述
						SomeJavaScriptCode	必需。规定该事件发生时执行的 JavaScript。

html5canvas

标签：--   set   text   完成后   gre   image   刷新   页面   create   

原文地址：https://www.cnblogs.com/aroyny/p/14385622.html