A-A+

《HTML5 Canvas基础教程》笔记

2016年05月08日 HTML/CSS 暂无评论

第一章 HTML5简介

新特性:

结构元素:section、header、ngroup、footer、nav、article、aside。

内容元素:figrue、figcaption、mark、time。

第三章 Canvas基础知识

canvas 若为定义宽高,则用默认300、150.

var canvas=document.getElementById('canvas');

var context=canvas.getContext('2d');

绘制矩形:context.fillRect(x,y,width,height);strokeRect,绘制一个矩形并绘制边框。

线条:context.beginPath();开始路径

context.moveTo(90,60);路径原点

context.lineTo(300,300);路径终点

context.closePath();结束路径

context.stroke();绘出路径轮廓

圆形:context.arc(x,y,radius,startAngle,endAngle,anticlockwise);第六个参数可选,但最好保留,逆时针绘制则true。

var degress=1;

var radians=degress*(Math.PI/180);

canvas中的角度是以弧度为单位的。360度是2π弧度。

文本:var text="hah";

context.font="italic 30px serif";

context.fillText(text,40,40);

擦除canvas:clearRect方法及宽度、高度技巧。宽度、高度技巧的缺点是:会完全重置canvas上面的所有内容,包括样式和颜色。

每当重新设置一个canvas元素的width和height时,canvas都会自动清除内容并返回其原始状态。

填满窗口

$(widnow).resize(resizeCanvas);

function resizeCanvas(){

canvas.attr("width",$(widnow).get(0),innerWidth);

canvas.attr("height",$(widnow).get(0),innerHeight);

context.fillRect(0,0,canvas.width(),canvas.height());

};

resizeCanvas();

}

canvas。attr;

第四章 canvas高级功能

状态:描述事物在特定时刻所处的状况。在画布中,绘图状态指的是描述某一时刻2D渲染上下文外观的整套属性。画布上的当前路径和当前位图(正在显示的内容)并不属于状态。

context.save()保存画布状态    栈

context.restore()回复画布状态

 变形

translate。在画布上进行平移使用的是translate方法,他实际上移动的是2D渲染上下文的坐标原点,而非所绘制的图像。每一种变形都会影响方法执行后所绘制的图形。

scale。参数为缩放背倍数。

rotate。其方法是把2D渲染上下文绕其原点进行旋转。注意执行变形的顺序。

变形矩阵

transform,6个参数,分别对应矩阵的每个值。

合成:globalAlpha 值在0.0到1.0(不透明)之间。

源是绘制的新图形。

globalCompositeOperation  11种方法

阴影:

四个全局属性:shadowBlur,shadowOffsetX,shadowOffsetY,shadowColor.

渐变,这两个方法都返回一个CanvasGradient对象。

线性渐变:createLinearGradient,

线性渐变:createRadialGradient,

addColorStop:颜色的偏移值(0为起点)

context.createRadialGradient(x0,y0,r0,x1,y1,r1);

贝塞尔曲线

quadraticCurveTo、bezierCurveTo.

画布导出为图像,toDataURL。

第五章 处理图像和视频

context.drawImage(image,x,y)需要调整大小,后面加上宽高即可。

裁剪,9个参数。

缩放与旋转,可绘制人造的反射效果。
JS Bin on jsbin.com

标签:

给我留言

Copyright © 花未全开月未圆 保留所有权利.   Theme  Ality

用户登录