Canvas基础知识(1)

Canvas 标签：在网页中实时生成图像，并操作图像内容（通俗就是在网页中画画） canvas画布可以制作在线绘图工具, canvas画布可以制作动态数据图纸.常用于网站后台的数据统计功能. canvas画布可以用于制作HTML5游戏 canvas画布可以制作app应用..... 书写： <canvas id=“myCanvas” width=“500” height=“300”></canvas>      注意：       0.IE9+浏览器支持           1.默认300宽度，150高度           2.不要使用css给canvas设置宽度和高度－导致绘制的图形被缩放           3.canvas提供一个画图空间，有canvas API进行绘图 使用： 获取canvas对象   var obj = document.getElementById('myCanvas');   // canvas的宽度和高度     console.log(obj.width);     console.log(obj.height); 获取绘图环境   var ctx = obj.getContext('2d');    Canvas绘图常见图形 直线     方法     moveTo(x,y):将鼠标移动到指定的点     lineTo(x,y):将画笔移动到指定x,y点，形成一条直线     stroke():将点绘制成直线     属性     lineWidth:直线的厚度     strokeStyle:直线(边框)的颜色     lineCap:直线头尾的样式（不占据原来直线的长度）         butt:默认         round:圆形         square:方形（多出宽度一半的值）     lineJoin:两条直线的夹角的样式         miter:默认尖角         round:圆形         bevel:斜角 代表没有绘制结束 开启路径   beginPath() 关闭路径   closePath() 虚线     moveTo(100,100)     lineTo(400,100)     setLineDash([5,10])        5:线段的长度    10:线段的间距     setLineDash([5,10,15,20])    奇数线段长度，偶数线段间距          注意：如果是奇数个数，会复制数组元素为偶数，然后进行循环 矩形     fillStyle:填充颜色     strokeStyle:矩形边框颜色     fillRect(起始点的横坐标，起始点的纵坐标，矩形的宽度，矩形的高度):绘制矩形框并填充颜色     strokeRect(起始点的横坐标，起始点的纵坐标，矩形的宽度，矩形的高度):绘制矩形框设置边框的颜色     clearRect(起始点的横坐标，起始点的纵坐标，矩形的宽度，矩形的高度):清空指定矩形内容 圆弧(圆形)     arc(圆心横坐标，圆心纵坐标，半径，开始弧度，结束弧度，逆时针true|顺时针false方向绘制)     起点和终点，圆弧结合起来组成的图形（PI/2的形状协助理解）     canvas很多都是利用弧度进行计算的     (***)角度和弧度计算公式：弧度 = 角度*Math.PI/180      全圆：2PI(360)      半圆：PI(180)      1/4圆：PI/2(90) 曲线     moveTo(移动到指定位置的横坐标，指定位置的纵坐标)     arcTo(第一组控制点的横坐标，纵坐标，第二组控制点的横坐标，纵坐标，圆弧的半径)     二次贝塞尔曲线     quadraticCurveTo(第一组控制点横坐标，第一组控制点纵坐标，第二组控制点横坐标，第二组控制点纵坐标)     context.moveTo(100,200);     context.quadraticCurveTo(200,100,400,300);     三次贝塞尔曲线     bezierCurveTo(第一组控制点横坐标，纵坐标，第二组控制点横坐标，纵坐标，第三组控制点横坐标，纵坐标):三组控制点来掌控曲线方向     context.moveTo(100,200);     context.bezierCurveTo(150,150,300,300,400,100); 文本     方法     fillText(text, x, y, [maxWidth]):填充方式绘制文本     strokeText(text, x, y, [maxWidth]):绘制文字边框颜色     文本属性     font属性：跟CSS一样     textAlign属性：设置文字水平对齐方式         start(默认) end left right center     textBaseline属性：文本垂直方式         top hanging middle alphabetic(默认) ideographic bottom             悬挂             字母排序    思想的     measureText():获取文本的宽度 平移旋转缩放     translate():移动(横坐标，纵坐标)         注意：移动的同时，也将坐标原点移动     scale(x的方向的缩放倍数,y方向的缩放倍数):缩放     rotate(弧度):旋转的弧度         注意：如果要旋转，默认是以坐标原点旋转的，所以如果要旋转，必须确认坐标原点在哪里 save()/restore():将这两个方法之间的代码独立，里面的样式设置不会带外面的绘制产生影响 属性：   globalAlpha:设置全局的透明度   globalCompositeOperation：图片合成：     source-over 默认。在目标图像上显示源图像。     source-atop 在目标图像顶部显示源图像。源图像位于目标图像之外的部分是不可见的。     source-in 在目标图像中显示源图像。只有目标图像内的源图像部分会显示，目标图像是透明的。     source-out  在目标图像之外显示源图像。只会显示目标图像之外源图像部分，目标图像是透明的。     destination-over  在源图像上方显示目标图像。     destination-atop  在源图像顶部显示目标图像。源图像之外的目标图像部分不会被显示。     destination-in  在源图像中显示目标图像。只有源图像内的目标图像部分会被显示，源图像是透明的。     destination-out 在源图像外显示目标图像。只有源图像外的目标图像部分会被显示，源图像是透明的。     lighter 显示源图像 + 目标图像。     copy  显示源图像。忽略目标图像。 线性渐变：指定区间的颜色过渡   var color = context.createLinearGradient(起始点横坐标，起始点纵坐标，宽度，高度)   color.addColorStop(偏移值，颜色) 径向渐变(两个圆心的连线进行颜色过渡，两个圆的切线的焦点处进行颜色的扩散)   var color = context.createRadialGradient(开始圆心横坐标，圆心纵坐标，半径，结束圆圆心横坐标，结束圆圆心纵坐标，结束圆的半径);   color.addColorStop(偏移值，颜色) 阴影   阴影颜色   context.shadowColor = 'red';   阴影偏移值   context.shadowOffsetX = 20;   context.shadowOffsetY = 20;   设置模糊值   context.shadowBlur = 4; 图片对象   将图片绘制到canvas画布中   drawImage(imgObj,起始横坐标，纵坐标，[固定宽度]，[固定高度]);   创建图片并设置图片是否重复   var bg = createPattern(imgObj,'repeat|repeat-x|repeat-y|no-repeat'):指定的方向内重复指定的元素   ctx.fillStyle = bg;   像素操作   // 获取canvas画布 指定区间位置 的 像素点集合对象   var obj = ctx.getImageData(起始横坐标，起始纵坐标，宽度，高度)     obj.width:行像素个数     obj.height:列像素个数     obj.data:整体像素组的颜色组成的数组     obj.data.length:像素个数的4倍（1个像素点4个颜色值）         rgba()都是0-255的范围，透明度也是   // 将图像obj写入到指定的canvas区间内   putImageData(obj,起始横坐标，起始纵坐标)   // 创建图像   createImageData(宽度，高度)