Html5笔记

Amazing Canvas!

context = canvas.getContext("2d");    //参数 contextID 指定了您想要在画布上绘制的类型。
//当前唯一的合法值是 "2d"，它指定了二维绘图，并且导致这个方法返回一个环境对象，该对象导出一个二维绘图 API

context.shadowXXX    //shadow about

context.stroke()     //给路径描边 context.fill() //填充路径后才能在画布上看到效果

context.save();     //保存当前context的状态，便于恢复
context.restore();       //恢复到context.save()时的context状态

context.drawImage(myCanvas/img,srcTL_X,srcTL_Y,srcWidth,srcHeight,tarTL_X,tarTL_Y,tarWidth,tarHeight)

//PixelOperation:
matImg=context.getImageData(srcTL_X, srcTL_Y, srcWidth, srcHeight)
matNew=createImageData(width,height)
matNew2=createImageData(matNew)
matImg[x*4+y*srcWidth+n]    //Pixel(x,y).r = matImg[i*4+0] g:1, b:2, alpha:3
context.putImageData(matImg, tarTL_X, tarTL_Y)

//matrix wise
context.scale(widthScale, heightScale)
context.rotate(n*Math.PI)
context.translate(delta_X, delta_Y)
context.transform(m11, m12, m21, m22, dx, dy)// 变形矩阵：m11水平缩放 m12水平错切 m21垂直错切 m22垂直缩放 dx水平移动 dy垂直移动
// m11 m21  dx  
// m12 m22 dy  
// 0  0  1