lifeispractice / canvas-study Goto Github PK

var canvas = document.getElementById('canvas');
canvas默认width为300，height为150
var ctx = canvas.getContext('2d');       //2d渲染上下文对象CanvasRenderingContext2D
通过canvas.style改变画布的宽高会拉伸图形，扭曲画布

//检查支持性
if (canvas.getContext){
  var ctx = canvas.getContext('2d');
  // drawing code here
} else {
  // canvas-unsupported code here
}

fillRect(x, y, width, height)        //填充矩形
strokeRect(x, y, width, height)       //矩形描边
clearRect(x, y, width, height)       //清除画布，清除部分完全透明

rect(x, y, width, height)           //矩形路径，需要配和fill和stroke

ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);    //x,y圆心坐标，半径，开始弧度，结束弧度，anticlockwise为false顺时针反之逆时针
角度与弧度的计算公式：弧度=(Math.PI/180)*角度

quadraticCurveTo(cp1x, cp1y, x, y) //cp1x,cp2y为控制点，x和y为结束点
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)  //cp1x, cp1y, cp2x, cp2y两个控制点

new Path2D();     // 空的Path对象
new Path2D(path); // 克隆Path对象
new Path2D(svg);    // 从SVG建立Path对象
ctx.fill(path2D);
ctx.stroke(path2D);     //路径对象创建后需要使用fill和stroke绘制到画布上；

new Path2D("M10 10 h 80 v 80 h -80 Z");    //先移动到点 (M10 10) 然后再水平移动80个单位(h 80)，然后下移80个单位 (v 80)，接着左移80个单位 (h -80)，再回到起点处 (z)

ctx.fillStyle = color         //颜色值接受属于css3规范的颜色值
ctx.strokeStyle = color
ctx.globalAlpha = transparencyValue         //0为完全透明，1为完全不透明
ctx.lineWidth = 1.0      //画笔线宽
ctx.lineCap = butt //round, square
ctx.lineJoin = miter //round,bevel
ctx.setLineDash([线长, 间距])     //数组长度为1代表线长和间距相等的虚线
ctx.lineDashOffset = Number    //设置虚线的其实偏移量,配合动画可以绘制流动的虚线效果
var gradient = ctx.createLinearGradient(x1, y1, x2, y2)       //渐变起点和渐变终点，线性渐变
var gradient =ctx.createRadialGradient(x1, y1, r1, x2, y2, r2)    //径向渐变
gradient.addColorStop(position, color)        //position为0~1,第二个是个css颜色值
ctx.createPattern(image, type)       //需要先加载Image对象，type:repeat,repeat-x,repeat-y和no-repeat
ctx.shadowOffsetX = 2;
ctx.shadowOffsetY = 2;
ctx.shadowBlur = 2;
ctx.shadowColor = "rgba(0, 0, 0, 0.5)";

ctx.fillText(text, x, y, maxWidth);          //maxWidth可有可无
ctx.strokeText(text, x, y, maxWidth);
ctx.font = "10px sans-serif";
ctx.textAlign = start;     //可选值start, end, left, right or center
ctx.textBaseLine = alphabetic;       //可选值:top, hanging, middle, alphabetic, ideographic, bottom
ctx.direction = inherit    //可选值ltr, rtl, inherit
ctx.measureText(text)        //测量文本的宽度