写在前面：
这篇大部分内容是《js高程》第6-7章的代码笔记，记在网上也是方便自己以后随时随地可以回看。
直接上代码，详见代码注释。
下面的代码是在sublime text3上编辑运行过的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Canvas</title>
</head>
<body>
<canvas id="drawing" width="500" height="600">A drawing of sth.</canvas>
<!--canvas默认宽300高150，不建议用css指定宽高-->
<script type="text/javascript">
var drawing=document.getElementById('drawing');
if(drawing.getContext){
var context=drawing.getContext("2d");//获得渲染上下文的对象
/*填充和描边
两个属性：fillStyle、strokeStyle
值可以是字符串、渐变对象、模式对象，默认"#000000"
context.strokeStyle='red';
context.fillStyle='#0000ff';
所有涉及描边和填充的操作都将使用这两个样式*/
/*绘制矩形*/
//方法：fillRect()、strokeRect()、clearRect():都接受4个参数(x，y，宽，高)
context.fillStyle='#ff0000';
context.fillRect(0,0,50,50);
context.fillStyle="rgba(0,0,255,0.5)";
context.fillRect(25,25,50,50);
context.strokeStyle='#ff0000';
context.strokeRect(100,25,50,50);
context.strokeStyle="rgba(0,0,255,0.5)";
context.lineWidth=5;
context.lineJoin="round";
context.strokeRect(125,50,50,50);
//描边宽度由lineWidth控制，值为任意整数
//lineCap:"butt"、"round"、"square"控制线条末端形状平头、圆头、方头
//lineJoin:"round"、"bevel"、"miter"控制线条相交方式圆交、斜交、斜接
//clearRect()用于清除画布上的矩形区域，本质上，把绘制上下文中的某一矩形区域变透明
context.clearRect(30,30,15,15);
/*绘制路径*/
//首先调用beginPath()方法表示要开始绘制新路径
//再调用下列方法来实际绘制路径
//绘制弧线，最后一个参数布尔值表示是否逆时针计算起始角度arc(x,y,r.startAngle,endAngle,counterclockwise)
//从上一点开始绘制曲线到(x2,y2)为止，给定半径穿过(x1,y1)arcTo(x1,y1,x2,y2,r)
//从上一点到(x,y)，以(c1x,c1y)(c2x,c2y)为控制点bezierCurveTo(c1x,c1y,c2x,c2y,x,y)
//lineTo(x,y)
//moveTo(x,y)将绘图游标移动，不画线
//从上一点开始绘制二次曲线，到(x,y)，(cx,cy)为控制点quadraticCurveTo(cx,cy,x,y)
//矩形路径，rect(x,y,width,height)
//创建路径后，若要连接到起点，调用closePath()，
//如果路径已完成，fill()填充，stroke()描边，
//可以调用clip()剪切区域
//绘制一个不带数字的时钟表盘
context.beginPath();
//外圆
context.arc(120,250,100,0,2*Math.PI,false);
//内圆
context.moveTo(215,250);
context.arc(120,250,95,0,2*Math.PI,false);
//分针
context.moveTo(120,250);
context.lineTo(120,165);
//时针
context.moveTo(120,250);
context.lineTo(55,250);
context.strokeStyle="black";
context.lineWidth=1;
context.stroke();
//isPointInPath(x,y)方法用于在路径被关闭之前确定画布上某一点是否位于路径上
if(context.isPointInPath(120,250)){
alert("Point (120,250) is in the path.");
}
/*绘制文本*/
//fillText()、strokeText()，4个参数('string',x,y,width)
//分别用fillStyle和strokeStyle属性，更多使用fillText()
//以3个属性为基础：
//font：样式、大小、字体
//textAlign：对齐方式"start""end""left""right""center"(建议"start""end")
//textBaseline：文本基线"top""hanging""middle""alphabetic""ideographic""bottom"
context.font="bold 14px Arial";
context.textAlign="center";
context.textBaseline="middle";
context.fillStyle="black";
context.fillText("12",120,165);
//辅助确定文本大小的方法measureText()，接收要绘制的文本为参数，返回一个TextMetrics对象，有一个width属性
/*变换*/
//rotate(angle):围绕原点旋转图像angle弧度
//scale(scaleX,scaleY):缩放，在各自轴上乘以缩放倍数，默认1.0
//translate(x,y):将原点移动到(x,y)，此后(0,0)会变成之前的(x,y)
//transform(m1_1,m1_2,m2_1,m2_2,dx,dy):修改变换矩阵，方式是乘以如下矩阵：
/*m1_1 m1_2 dx
m2_1 m2_1 dy
0 0 1 */
//setTransform(m1_1,m1_2,m2_1,m2_2,dx,dy):将变换矩阵重置为默认状态，然后再调用transform()
context.beginPath();
//外圆
context.arc(350,100,99,0,2*Math.PI,false);
//内圆
context.moveTo(444,100);
context.arc(350,100,94,0,2*Math.PI,false);
//在变换原点与设置旋转弧度之前保存环境
context.save();
//变换原点
context.translate(350,100);
//旋转表针
//以弧度为单位，360°角=2π弧度，1弧度=57.3°角，1°角=π/180弧度
context.rotate(1);
//分针
context.moveTo(0,0);
context.lineTo(0,-85);
//时针
context.moveTo(0,0);
context.lineTo(-65,0);
context.strokeStyle="black";
context.lineWidth=1;
context.stroke();
/*
save()、restore()可以跟踪上下文的状态变化，
save保存设置到一个栈结构，restore恢复前一级保存的状态
*/
context.restore();//回到变换原点与设置旋转弧度之前
context.translate(300,250);
context.fillStyle="yellow";
context.save();
context.fillStyle="green";
context.save();
context.fillStyle="brown";
context.fillRect(0,0,50,50);
context.restore();//回到green
context.fillRect(50,0,50,50);
context.restore();//回到yellow
context.fillRect(0,50,50,50);
/*阴影*/
//根据下面的属性值，为形状或路径绘制阴影
//shadowColor:默认黑丝
//shadowOffsetX:x轴阴影偏移量，默认0
//shadowOffsetY:y轴阴影偏移量，默认0
//shadowBlur:模糊像素，默认0，即不模糊
context.translate(-300,-250);
context.save();
context.shadowOffsetX=5;
context.shadowOffsetY=5;
context.shadowBlur=4;
context.shadowColor="rgba(0,0,0,0.5)";
context.fillStyle='#00ff00';
context.fillRect(0,400,50,50);
context.fillStyle="rgba(0,0,255,0.5)";
context.fillRect(25,425,50,50);
/*渐变*/
//渐变由CanvasGradient实例表示，通过createLinearGradient()方法创建一个新的线性渐变，四个参数(x1,y1,x2,y2)
//用addColorStop()指定色标，两个参数(0-1之间的色标位置，颜色值)
var gradient1=context.createLinearGradient(100,400,140,440);
gradient1.addColorStop(0,"white");
gradient1.addColorStop(1,"brown");
context.fillStyle=gradient1;
context.fillRect(100,400,80,80);
//径向渐变(放射渐变)，用createRadialGradient()
//6个参数(起始两个圆的圆心和半径)
context.shadowOffsetX=0;
context.shadowOffsetY=0;
var gradient2=context.createRadialGradient(250,450,0,250,450,50);
gradient2.addColorStop(0,"white");
gradient2.addColorStop(1,"grey");
context.fillStyle=gradient2;
context.fillRect(200,400,100,100);
/*
使用toDataURL()可以导出在<canvas>上绘制的图像，
默认PNG，
Firefox和Opera支持基于"image/jpeg"的JPEG格式，IE9+、Firefox3.5、Opera10，
toDataURL()是Canvas对象的方法，不是上下文对象的方法。
var imgURI=drawing.doDataURL("image/png");//取得图像数据的URI
var image=document.createElement("img");
image.src=imgURI;
document.body.appendChild(image); */
/*绘制图像
drawImage()方法，三种不同的参数组合:
var image=document.images[0];
1、
context.drawImage(image,10,10);
传入一个html<img>元素，和起始位置
2、
context.drawImage(image,10,10,50,100);
后两个参数设置宽高
3、
context.drawImage(image,0,0,100,100,0,400,100,100);
把图像的0,0,100,100的区域，画到上下文的0,400的位置，大小为100,100
也可以传入另一个<canvas> */
/*模式
模式其实就是重复的图像，可用于填充或描边。
createPattern()，两个参数(image,"repeat"/"repeat-x"/"repeat-y"/"no-repeat")
第一个参数可以是<video><canvas>
var image=document.images[0],
pattern=context.createPattern(image,"repeat");
context.fillStyle=pattern;
context.fillRect(0,0,100,100);
注意：将填充样式设为模式对象，只表示在某个区域内显示重复的图像，不是要从某个位置开始绘制重复的图像。
*/
/*使用图像数据
通过getImageData(x,y,width,height)取得原始图像数据，
返回一个ImageData实例，有三个属性:width、height、data，
其中data是一个数组，保存每个像素的数据，
每一个像素用4个元素来保存，分别是r、g、b、a，每个值在[0,255]之间
创建一个简单的灰阶过滤器
var imageData,data,i,len,average,red,green,blue,alpha;
context.drawImage(image,0,0);
imageData=context.getImageData(0,0,image.width,image.height);
data=imageData.data;
for (i = 0,len=data.length; i < len; i+=4) {
red=data[i];
green=data[i+1];
blue=data[i+2];
alpha=data[i+3];
average=Math.floor((red+green+blue)/3);
data[i]=average;
data[i+1]=average;
data[i+2]=average;
//透明度不变
}
imageData.data=data;
context.putImageData(imageData,0,0);
*/
/*合成
2D上下文的另两个属性：globalAlpha、globalCompositionOperation
globalAlpha:[0,1]之间，指定所有绘制的透明度
globalCompositionOperation:表示后绘制的图形怎样与先绘制的结合
*/
}
</script>
</body>
</html>再插一个之前看网易微专业前端开发视频课程的笔记，忽略丑字......
扫描二维码关注公众号，回复：
1897658 查看本文章
PS:
emmmm......
有没有人能告诉我怎么把图缩小......