Canvas2D基础
Canvas2D基础
Canvas2D基础
什么是Canvas
基本使用
Rectangles（矩形）
Drawing Paths
Drawing Text
Transformations
Drawing Images 图片绘制
shadows 加阴影
Gradients 渐变色
Patterns 模式
Working with Image Data 图像原始数据
Compositing 合成
总结
Canvas2D基础
什么是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
图像变换方法
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)
可用translate重新定义原点的位置，
在画圆的时候，可将原点位置移动圆心位置，这样在画圆定位过程中比较方便
context.rotate 注意是将坐标轴进行旋转
Drawing Images 图片绘制
从当前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)
将图像上指定区域的部分 插入 canvas中的指定区域（相当于剪切原图像上的一部分到canvas中)
//从图像上(0,10)开始，宽150，高385的区域插入到 canvas中从(0,100)开始，宽40，高60的区域内 context.drawImage(image, 0, 10, 150, 385, 0, 100, 40, 60);
- 注意，如果插入进来的图片是在别的域名下的，会报错
shadows 加阴影
DEMO:
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 模式
即图像的重复模式 ，跟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);
总结
- canvas内容就是上面这些了，就好比设计师能用的颜色就那么多，但是将颜色，图形组合起来，创意真的是无限的，canvas也是如此。
- webGL是一个 对OpenGL ES 2.0浏览器实现接口，用于3D绘画，生产阶段最好不要用，可用于实验阶段。
