Canvas2D基础

Canvas2D基础

• Canvas2D基础
  • 什么是Canvas
  • 基本使用
  • Rectangles（矩形）
  • Drawing Paths
  • Drawing Text
  • Transformations
  • Drawing Images 图片绘制
  • shadows 加阴影
  • Gradients 渐变色
  • Patterns 模式
  • Working with Image Data 图像原始数据
  • Compositing 合成
  • 总结

Canvas2D基础

什么是Canvas

<canvas>是H5中最受欢迎的元素，在页面上划出一片区域，利用JS在上面画出图形，起初由Apple公司提出，各大浏览器厂商也对其做了不同程度上的实现。canvas中规定了了2D context和3D context（WebGL），目前绝大部分浏览器支持2D context。WebGL的发展还比较缓慢。

基本使用

1、toDataURL() 将画好的图像输出为图片

//get data URI of the image
var imgURI = drawing.toDataURL("image/png");
//display the image
var image = document.createElement("img");
image.src = imgURI;
document.body.appendChild(image);

2、原点是基于canvas元素左上角
3、2D Context的两个基本绘画操作 fill and stroke

Rectangles（矩形）

1、fillRect()

context.fillRect(10, 10, 50, 50);
//draw a blue rectangle that’s semi-transparent
context.fillStyle = "rgba(0,0,255,0.5)";
context.fillRect(30, 30, 50, 50);

2、strokeRect()

//draw a red outlined rectangle
context.strokeStyle = "#ff0000";
context.strokeRect(10, 10, 50, 50);
//draw a blue outlined rectangle that’s semi-transparent
context.strokeStyle = "rgba(0,0,255,0.5)";
context.strokeRect(30, 30, 50, 50);

3、clearRect()

//draw a red rectangle
context.fillStyle = "#ff0000";
context.fillRect(10, 10, 50, 50);
//draw a blue rectangle that’s semi-transparent
context.fillStyle = "rgba(0,0,255,0.5)";
context.fillRect(30, 30, 50, 50);
//clear a rectangle that overlaps both of the previous rectangles
context.clearRect(40, 40, 10, 10);

Drawing Paths

1、如何画一个表盘

var drawing = document.getElementById("drawing");
//make sure <canvas> is completely supported
if(drawing.getContext) {
    var context = drawing.getContext("2d");
    //start the path
    context.beginPath();
    //draw outer circle
    context.arc(100, 100, 99, 0, 2 * Math.PI, false);
    //draw inner circle
    context.moveTo(194, 100); //将光标移动这个内圆绘制的起点上
    context.arc(100, 100, 94, 0, 2 * Math.PI, false);
    //draw minute hand
    context.moveTo(100, 100);
    context.lineTo(100, 15); // 从最后绘制点到(100,15)绘制一条线
    //draw hour hand
    context.moveTo(100, 100);
    context.lineTo(35, 100);
    //stroke the path
    context.stroke();
}

2、判断一个坐标点是否在绘制路线上
context.isPointInPath(100, 100) // true

Drawing Text

1、fillText() 、  strokeText() 后者很少用
2、3个属性font、 textAlign、 textBaseline
3、Demo

context.font = "bold 14px Arial";
context.textAlign = "center";
context.textBaseline = "middle";
context.fillText("12", 100, 20);
//start-aligned
context.textAlign = "start";
context.fillText("12", 100, 40);
//end-aligned
context.textAlign = "end";
context.fillText("12", 100, 60);

4、measureText()的使用 可以度量文字大小

// 如果文字的长度大于140，就将字体缩小
var fontSize = 100;
context.font = fontSize + "px Arial";
while(context.measureText("Hello world!").width > 140) {
    fontSize--;
    context.font = fontSize + "px Arial";
}
context.fillText("Hello world!", 10, 10);
context.fillText("Font size is " + fontSize + "px", 10, 50);

Transformations

1. 图像变换方法
   rotate(angle)
   scale(scaleX, scaleY)
   translate(x, y)
   transform(m1_1, m1_2, m2_1, m2_2, dx, dy)
   setTransform(m1_1, m1_2, m2_1, m2_2, dx, dy)

2. 可用translate重新定义原点的位置，
   在画圆的时候，可将原点位置移动圆心位置，这样在画圆定位过程中比较方便

3. context.rotate 注意是将坐标轴进行旋转
   

Drawing Images 图片绘制

1. 从当前canvasd的坐标(10,10)的位置将图片插入进来（注意，如果图片在canvas中装不下，那么图片是插入不进来的）

var image = document.images[0];
 context.drawImage(image, 10, 10);

1. 指定区域内插入 -- 执行在从(10,10)开始，宽90，高90的区域内绘制图像

context.drawImage(image, 10, 10,90,90)

1. 将图像上指定区域的部分 插入 canvas中的指定区域（相当于剪切原图像上的一部分到canvas中)

//从图像上(0,10)开始，宽150，高385的区域插入到 canvas中从(0,100)开始，宽40，高60的区域内
context.drawImage(image, 0, 10, 150, 385, 0, 100, 40, 60);

1. 注意，如果插入进来的图片是在别的域名下的，会报错

shadows 加阴影

DEMO:

var drawing = document.getElementById("drawing");
var context = drawing.getContext("2d");
context.shadowOffsetX = 5;
context.shadowOffsetY = 5;
context.shadowBlur = 4;
context.shadowColor = "rgba(0, 0, 0, 0.5)";
//draw a red rectangle
context.fillStyle = "#ff0000";
context.fillRect(10, 10, 50, 50);
//draw a blue rectangle
context.fillStyle = "rgba(0,0,255,1)";
context.fillRect(30, 30, 50, 50);

Gradients 渐变色

1. 线性渐变
   

var gradient = context.createLinearGradient(30, 30, 80, 80);
gradient.addColorStop(0, "white");
gradient.addColorStop(1, "black");
context.fillStyle = gradient;
context.fillRect(30, 30, 50, 50);

1. 径项渐变
   

var gradient = context.createRadialGradient(55, 55, 10, 55, 55, 30);
gradient.addColorStop(0, "white");
gradient.addColorStop(1, "black");
context.fillStyle = gradient;
context.fillRect(30, 30, 50, 50);

Patterns 模式

1. 即图像的重复模式 ，跟css一样 “repeat”, “repeat-x”, “repeat-y”, no-repeat”

var context = drawing.getContext("2d");
var image = document.images[0],
    pattern = context.createPattern(image, "repeat");
//draw a rectangle
context.fillStyle = pattern;  // 图像repeat模式仍然是从(0,0)开始的
context.fillRect(30, 0, 150, 150); // 这里的意思是绘制矩形，并让图像repeat模式在该矩形区域显示，并不是说 图片repeat是从绘制该矩形的起点开始的，渐变也是如此

Working with Image Data 图像原始数据

可以用来做滤镜效果,详细可看  www.html5rocks.com/en/tutorials/canvas/imagefilters/

Compositing 合成

两个图像之间如何纠缠的，这里举一个例子，其他雷同

var drawing = document.getElementById("drawing");
var context = drawing.getContext("2d");
//draw a red rectangle
context.fillStyle = "#ff0000";
context.fillRect(10, 10, 50, 50);
//change the global alpha
context.globalCompositeOperation = "xor";
//draw a blue rectangle
context.fillStyle = "rgba(0,0,255,1)";
context.fillRect(30, 30, 50, 50);

总结

1. canvas内容就是上面这些了，就好比设计师能用的颜色就那么多，但是将颜色，图形组合起来，创意真的是无限的，canvas也是如此。
2. webGL是一个 对OpenGL ES 2.0浏览器实现接口，用于3D绘画，生产阶段最好不要用，可用于实验阶段。