html 常用

1、 var canvas = document.getElementById("tutorial");
var ctx = canvas.getContext("2d");

ctx.clearRect(0, 0, 200, 200); // 清除画布的位置左上角的坐标及右下角坐标

ctx.strokeStyle = "blue"; //strokeStyle 的值决定了你当前要绘制的线条的颜色

ctx.fillStyle = "blue";//fillStyle 的值决定了你当前要填充的区域的颜色

ctx.fillRect(10, 10, 180, 180);

ctx.strokeRect(10, 10, 180, 180);

2、moveTo(x,y)：moveTo方法并不能画出任何东西，它只是将画笔的当前点移动到(x,y)处

lineTo(x,y)：从当前点到（x,y）点绘制一条直线。注意：绘制完成后，当前点就变成了(x,y)，除非你用 moveTo 方法去改变他

arc(x, y, radius, startAngle, endAngle, anticlockwise) ：绘制一条弧线

quadraticCurveTo(cp1x, cp1y, x, y) 
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) ：这两个方法都是绘制贝叶斯曲线

rect(x, y, width, height) ：绘制一个矩形。注意： 当它被调用时，moveTo 方法会自动被调用，参数为(0,0)，于是起始坐标又恢复成初始原点了。

3、理解绘制路径 Drawing Path

beginPath() ：开始路径，意思就是在你调用这个方法后，你绘制的图形就不会再向屏幕输出了，而只是画到了上下文对象中（内存中）

stroke() ：将你调用 beginPath 方法以后绘制的所有线条，一次性输出到显示设备上

closePath() ：如果你调用 beginPath 方法以后，在上下文对象中进行了一系列的绘制，但是得到的图形是不闭合的，这个方法将会帮你补上最后一条直线，将你的图形闭合起来。

注意：closePath并不向屏幕输出图形，而只是在上下文对象中补上一条线，这个步骤不是必需的。

fill() ：

如果你的绘制路径组成的图形是封闭的，这个方法将用 fillStyle 设置的颜色填充图形，然后立即向屏幕输出；

如果绘制路径不是封闭的，这个方法会先将图形闭合起来，然后再填充输出。

注意：所有的 fill 图形，如 fillRect 等，都是立刻向屏幕输出的，他们没有绘制路径这个概念

这段代码中，有一处奇怪的地方，就是坐标循环是从0.5开始的，这是为什么呢？

如下图，假如我想绘制一条从(1,0)到(1,3)的线，由于线的默认宽度是一个像素，所以在我想象中应该绘制成深绿色的部分，即在坐标 1 两边各占半个像素的宽度。

然而，浏览器的最小单位是一个像素，所以他会向两边扩展，实际绘制出来的浅绿色的部分，即占用了两个像素的宽度。这样，我们绘制的线条在坐标上就不精确了

如下图，如果我们给出的起始坐标是(1.5,0)和(1.5,3)，那么线条的宽度才是正确的一个像素。

clearRect(x,y,width,height)：

它接受四个参数， x 和 y 指定矩形左上角(相对于原点)的位置，width 和 height 是矩形的宽和高。调用该方法会将给出的矩形区域中所有绘制图形都清空，露出画布的背景

4\ ImageData ImageData对象用来保存图像像素值，ImageData对象用来保存图像像素值，它有 width、height和 data 三个属性，其中 data 属性就是一个连续数组，图像的所有像素值其实是保存在 data 里面的。   创建 100*100 像素的 ImageData 对象，其中每个像素均被设置为红色：：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var imgData=ctx.createImageData(100,100);
for (var i=0;i<imgData.data.length;i+=4)
  {
  imgData.data[i+0]=255;
  imgData.data[i+1]=0;
  imgData.data[i+2]=0;
  imgData.data[i+3]=255;
  }
ctx.putImageData(imgData,10,10);

data 属性返回一个对象，该对象包含指定的 ImageData 对象的图像数据。

上下文对象 Context 有三个方法用来创建、读取和设置 ImageData 对象，他们分别是

createImageData(width, height)：在内存中创建一个指定大小的 ImageData 对象（即像素数组），对象中的像素点都是黑色透明的，即rgba(0,0,0,0)

getImageData(x, y, width, height)：返回一个 ImageData 对象，这个 IamgeData 对象中包含了指定区域的像素数组

putImageData(data, x, y)：将 ImageData 对象绘制到屏幕的指定区域上