H5 canvas

2017-10-12 本文已影响0人闫子扬

canvas基本标签

<canvas id="myCanvas" width="200" height="200" style="border:1px solid #aaa">< /canvas>
宽高写在内部跟样式有区别的（样式设置-画出的图形宽高改变，内部设置-画出的图形宽高不变）
var cvs = document.getElementById("myCanvas");
IE 6 7 8不支持 <canvas>标签

每个画布都必须要有一个context（上下文）的定义，如下面代码所示。就目前的情况来说，官方规范只承认一个2D环境：
var ctx = cvs.getContext("2d");

绘制

ctx.beginPath():开始一个路径。
ctx.moveTo(x,y):路径移到画布中的指定点，即起点。
ctx.lineTo(x,y):添加一个新点，画线。
ctx.closePath()：关闭绘制路径.
ctx.fillStyle:用来设置填充颜色。
ctx.fill()：填充已定义好的路径。
ctx.lineWidth：画线的宽度。
ctx.strokeStyle:用来设置描边颜色。

ctx.stroke():绘制已定义好的路径。

  ctx.beginPath();
  ctx.moveTo(100, 100);
  ctx.lineTo(300,100);
  ctx.lineTo(100,200);
  ctx.closePath();
  ctx.strokeStyle = '#fc0';
  ctx.lineWidth = 10;
  ctx.stroke();
  ctx.rect(350, 100, 200, 100);
  ctx.stroke();

矩形的绘制 rect(x,y,w,h)
x,y为起始坐标，w、h为矩形的宽、高

ctx.fillRect(x,y,w,h)及 ctx.strokeRect(x,y,w,h)
圆形的绘制 arc(x,y,r,sa,ea,true/false)
x,y为圆心坐标，r为半径，sa、ea分别为起始角度和结束角度，true是逆时针画圆，false是顺时针画圆；360度角即2PI弧度，1度就是2PI/360=PI/180弧度，90度就是2PI/360*90=PI/2弧度
绘制文字
方法：
fillText(text,x,y,maxWidth):填充绘制
text表示文字 x,y为坐标
maxWidth可选，为文字最大宽度，防止文字溢出

strokeText(text,x,y,maxWidth):描边绘制
text表示文字 x,y为坐标
maxWidth可选，为文字最大宽度，防止文字溢出。

常用属性：
font文本内容的当前字体属性
示例：ctx.font = "bold 60px 微软雅黑"；(顺序不能改)
textAlign 文本内容的当前对齐方式(一般不需要)
示例：ctx.textAlign = "left"; ctx.textAlign ="right";
textBaseline绘制文本时使用的当前文本基线
示例：ctx.textBaseline = "middle"; ctx.textBaseline = "top"; ctx.textBaseline="bottom";
图形的组合方式
globalCompositeOperation属性，控制图形的组合方式，这个属性归getContext('2d')所创建的对象所有
globalCompositeOperation="type";
type的值：
* source-over(默认值)，表示新图覆盖在旧图之上
* source-in ：只绘制新图的重叠部分，其他透明
* source-out ：只绘制新图，重叠部分和旧图透明
* source-atop ：只绘制旧图和重叠的部分，其他透明
* destination-over ：表示旧图覆盖在新图之上
* destination-in ：值绘制旧图的重叠部分，其他透明
* destination-out ：只绘制旧图，重叠部分和新图透明
* destination-atop ：只绘制新图和重叠部分，其他透明
* lighter：旧图与新图都绘制，重叠部分混色处理
* xor ：旧图和新图重叠处做透明处理
* copy ：只绘制新图形，不绘制旧图形。

图形的阴影。

阴影属性：

shadowCOlor：设置阴影颜色。
shadowBlur：设置阴影模糊级别。
shadowOffsetX：设置阴影在x轴上距离图形的距离
shadowOffsetY：设置阴影在y轴上距离图形的距离

ctx.shadowColor="red";
ctx.shadowBlur=20;
ctx.shadowOffsetX=5;
ctx.shadowOffsetY=5;

图像的处理

绘制图像
- drawImage(img,x,y)
  x:图片横坐标的起始值 y：图片纵坐标的起始值
- drawImage(img,x,y,w,h)
  w：在画布中图片显示的宽度 h：在画布中图片显示的高度
- drawImage(img,x,y,w,h,rx,ry,rw,rh)
  rx、ry：显示在画布中的坐标 rw、rh：显示在画布中的宽、高
图像在画布中的平铺
createPattern(img,type)
type:repeat整个画布平铺
repeat-x/y在x/y轴方向上平铺
no-repeat不平铺
图像的裁剪(配合路径使用)
clip（）配合路径使用，先绘制好路径，然后调用clip方法
提示：一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内（不能访问画布上的其他区域）
像素处理
getImageData(x,y,w,h)：可以获取指定区域内的像素点的数据；
putImageData(imgData,x,y);getImageData返回的像素数据点imgData填充到画布上面，从x、y点开始填充；
图像的输出
canvas.toDataURL( type , args ):
为canvas的方法，用来返回一个url地址，将canvas画布转化为一张图像；
图像是基于Base64编码的 , 如果不指定两个参数，无参数调用该方法，转换的图像格式为png格式。
•type:图像格式，image/png image/jpeg等
•args:可选参数。例如，如果type为image/jpeg，则args可以是0和1之间的值，以指定图像的品质。
其他方法
scale(w,h) 缩放当前绘图:
w: 缩放绘图的宽度 h: 缩放绘图的高度
rotate(angle) 旋转当前绘图的坐标轴
1°等于Math.PI/180 5°=5*Math.PI/180
translate(x,y) 重新映射画布上的 (0,0) 位置

save()、restore():
绘制复杂图形必不可少的方法，分别用来保存、恢复canvas的状态，无参数
清除画布
ctx.clearRect(x,y,width,height):
x : 清除起点横坐标
y : 清除起点纵坐标
width : 清除长度
height : 清除高度

canvas学习：http://blog.csdn.net/clh604/article/details/8536059

H5 canvas

canvas基本标签

绘制

图形的阴影。

图像的处理

猜你喜欢

热点阅读