<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
/*
*
设置fillStyle属性可以是CSS颜色，渐变，或图案。fillStyle 默认设置是#000000（黑色）。
fillRect(x,y,width,height) 方法定义了矩形当前的填充方式。
strokeRect方法绘制矩形
strokeStyle设置边缘线的颜色 或者渐变模式
context.strokeRect(x,y,width,height);
stroke() 方法会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径。默认颜色是黑色。
//清除矩形 context.clearRect(0,0,360,360) 其实就是一个更大的矩形把其他的覆盖掉
*
* */
function draw21(id) {
var canvas = document.getElementById(id);
if(canvas == null) {
return false;
};
var context = canvas.getContext('2d');
//不设置fillstyle下的默认fillstyle=black；
context.fillRect(0, 0, 100, 100);
//不设置strokeStyle下的默认strokeStyle=black
context.strokeRect(120, 0, 100, 100);
//设置纯色
context.fillStyle = 'red'; //全部填充 纯色
context.fillRect(0, 120, 100, 100);
context.strokeStyle = 'blue'; //只是线
context.strokeRect(120, 120, 100, 100);
//设置透明度实践证明透明度>0,<1值越低 越透明 值》=1时为纯色 值《=0时为完全透明
context.fillStyle = 'rgba(255,0,0,0.2)';
context.fillRect(0, 240, 100, 100);
context.strokeStyle = 'rgba(255,0,0,0.2)';
context.strokeRect(120, 240, 100, 100);
context.fillStyle = 'green'; //画纯色的 全填充的颜色
context.fillRect(240, 0, 100, 100); //绘制 线矩形 位置 参数（x轴位置，Y轴位置，宽，高）
context.strokeStyle = 'yellowgreen'; //画线的颜色
context.strokeRect(240, 120, 100, 100); //绘制 线矩形 位置 参数（x轴位置，Y轴位置，宽，高）
context.fillStyle = 'darkgreen';
context.fillRect(240, 240, 100, 100);
}
function draw22(id) {
var canvas = document.getElementById(id);
if(canvas == null) {
return false;
}
var context = canvas.getContext('2d');
context.fillRect(0, 0, 100, 100);
//不设置strokeStyle下的默认strokeStyle=black
context.strokeRect(120, 0, 100, 100);
//设置纯色
context.fillStyle = 'red'; //全部填充 纯色
context.fillRect(0, 120, 100, 100);
context.strokeStyle = 'blue'; //只是线
context.strokeRect(120, 120, 100, 100);
//设置透明度实践证明透明度>0,<1值越低 越透明 值》=1时为纯色 值《=0时为完全透明
context.fillStyle = 'rgba(255,0,0,0.2)';
context.fillRect(0, 240, 100, 100);
context.strokeStyle = 'rgba(255,0,0,0.2)';
context.strokeRect(120, 240, 100, 100);
context.fillStyle = 'green'; //画纯色的 全填充的颜色
context.fillRect(240, 0, 100, 100); //绘制 线矩形 位置 参数（x轴位置，Y轴位置，宽，高）
context.strokeStyle = 'yellowgreen'; //画线的颜色
context.strokeRect(240, 120, 100, 100); //绘制 线矩形 位置 参数（x轴位置，Y轴位置，宽，高）
context.fillStyle = 'darkgreen';
context.fillRect(240, 240, 100, 100);
//清除矩形
context.clearRect(0, 0, 360, 360)
}
/*
画圆
context.beginPath() 起始一条路径，或重置当前路径
arc 创建弧/曲线（用于创建圆形或部分圆）
context.arc(x,y,r,sAngle,eAngle,counterclockwise)
(x,y,半径,起始角（以弧度计算 弧的圆形的三点钟位置是 0 度），结束角（以弧度计算），可选，规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。)
closePath 创建从当前点回到起始点的路径
* */
function draw23(id) {
var canvas = document.getElementById(id);
if(canvas == null) {
return false;
}
var context = canvas.getContext('2d');
var n = 0;
// 四分之一 圆弧
context.beginPath();
context.arc(100, 150, 50, 0, 0.5 * Math.PI, false);
context.fillStyle = 'green'; //填充色
context.fill();
context.strokeStyle = 'red'; //线
context.closePath();
context.stroke();
//半圆
context.beginPath();
context.arc(300, 150, 50, 0, 1 * Math.PI, false);
context.fillStyle = 'rgba(255,0,0,0.25)';
context.fill();
context.strokeStyle = 'rgba(255,0,0,0.25)';
context.closePath();
context.stroke();
//四分之3 园
context.beginPath();
context.arc(100, 300, 50, 0, 1.5 * Math.PI, false);
context.fillStyle = 'rgba(255,0,0,0.25)';
context.fill();
context.strokeStyle = 'rgba(255,0,0,0.25)';
context.closePath();
context.stroke();
//整个园
context.beginPath();
context.arc(300, 300, 50, 0, 2 * Math.PI, false);
context.fillStyle = 'rgba(255,0,0,0.25)';
context.fill();
context.strokeStyle = 'rgba(255,0,0,0.25)';
context.closePath();
context.stroke();
//4分之1园
context.beginPath();
context.moveTo(500, 300); //先移动到圆心 从圆心开始画
context.arc(500, 300, 50, 0, 0.5 * Math.PI, false);
context.fillStyle = 'rgba(255,0,0,0.25)';
context.fill();
context.strokeStyle = 'rgba(255,0,0,0.25)';
context.closePath();
context.stroke();
}
//moveTo() 把路径移动到画布中的指定点，不创建线条
//lineTo() 添加一个新点，然后在画布中创建从该点到最后指定点的线条
/*
实例
开始一条路径，移动到位置 0,0。创建到达位置 300,150 的一条线：
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(300,150);
ctx.stroke();
* */
//fill() 填充当前绘图（路径）
//stroke() 绘制已定义的路径
function draw1(id) {
var canvas = document.getElementById(id);
if(canvas == null) {
return false;
}
var context = canvas.getContext('2d');
context.fillStyle = '#eeeeff';
context.fillRect(0, 0, 400, 300);
var dx = 150;
var dy = 150;
var s = 100;
context.beginPath();
context.fillStyle = 'rgb(0,0,100)';
var x = Math.sin(0);
var y = Math.cos(0);
var dig = Math.PI / 15 * 11;
for(var i = 0; i < 60; i++) {
var x = Math.sin(i * dig);
var y = Math.cos(i * dig);
context.lineTo(dx + x * s, dy + y * s);
}
context.closePath();
context.fill();
context.stroke();
}
function draw8(id) {
var canvas = document.getElementById(id);
if(canvas == null) {
return false;
}
var context = canvas.getContext('2d');
context.strokeStyle = 'rgb(250,0,0)';
context.fillStyle = 'rgb(250,0,0)';
//实验证明第一次lineTo的时候功能和moveTo一样
context.lineTo(100, 100); //第一次的时候 点移动到了100 100
//之后的lineTo会以上次lineTo的节点为开始
context.lineTo(200, 200); //从100 100到200 200 画了一条线
context.lineTo(200, 100); //又画到了200 100
context.moveTo(200, 50); //点移动到了200 50
context.lineTo(100, 50); //从200 50到100 50画了一条线
context.stroke();
}
/*
bezierCurveTo() 方法通过使用表示三次贝塞尔曲线的指定控制点，向当前路径添加一个点。
提示：三次贝塞尔曲线需要三个点。前两个点是用于三次贝塞尔计算中的控制点，第三个点是曲线的结束点。
曲线的开始点是当前路径中最后一个点。如果路径不存在，那么请使用 beginPath() 和 moveTo() 方法来定义开始点。
开始点：moveTo(20,20)
控制点 1：bezierCurveTo(<20,100>,200,100,200,20)
控制点 2：bezierCurveTo(20,100,<200,100>,200,20)
结束点：bezierCurveTo(20,100,200,100,<200,20>)
quadraticCurveTo() 方法通过使用表示二次贝塞尔曲线的指定控制点，向当前路径添加一个点。
提示：二次贝塞尔曲线需要两个点。第一个点是用于二次贝塞尔计算中的控制点，第二个点是曲线的结束点。
曲线的开始点是当前路径中最后一个点。如果路径不存在，那么请使用 beginPath() 和 moveTo() 方法来定义开始点。
开始点：moveTo(20,20)
控制点：quadraticCurveTo(<20,100>,200,20)
结束点：quadraticCurveTo(20,100,<200,20>)
* */
function draw24(id) {
var canvas = document.getElementById(id);
if(canvas == null) {
return false;
}
var context = canvas.getContext('2d');
context.strokeStyle = 'rgb(255,0,0)';
context.moveTo(50, 50);
context.bezierCurveTo(50, 50, 150, 50, 150, 150);
context.stroke();
context.quadraticCurveTo(150, 250, 250, 250);
context.stroke();
}
function draw2(id) {
var canvas = document.getElementById(id);
if(canvas == null) {
return false;
}
var context = canvas.getContext('2d');
context.fillStyle = "#eeeff";
context.fillRect(0, 0, 400, 300);
var n = 0;
var dx = 150;
var dy = 150;
var s = 100;
context.beginPath();
context.globalCompositeOperation = 'and';
context.fillStyle = "rgb(100,255,100)";
var x = Math.sin(0);
var y = Math.cos(0);
var dig = Math.PI / 15 * 11;
context.moveTo(dx, dy);
for(var i = 0; i < 30; i++) {
var x = Math.sin(i * dig);
var y = Math.cos(i * dig);
context.bezierCurveTo(dx + x * s, dy + y * s - 100, dx + x * s + 100, dy + y * s, dx + x * s, dy + y * s);
}
context.closePath();
context.fill();
context.stroke();
}
function draw5(id) {
var canvas = document.getElementById(id);
if(canvas == null) {
return false;
}
var context = canvas.getContext('2d');
context.save(); //保存了当前context的状态
context.fillStyle = '#eeeeff';
context.fillRect(0, 0, 400, 300);
context.fillStyle = "red";
//平移 缩放 旋转 1 2 3
context.translate(100, 100);
context.scale(0.5, 0.5);
context.rotate(Math.PI / 4);
context.fillRect(0, 0, 100, 100);
context.restore(); //恢复到刚刚保存的状态，保存恢复 只能用1次
context.save(); //保存了
context.fillStyle = 'blue';
//平移 旋转 缩放 1 3 2
context.translate(100, 300);
context.rotate(Math.PI / 4);
context.scale(0.5, 0.5);
context.fillRect(0, 0, 100, 100);
context.restore(); //恢复到刚刚保存的状态，保存恢复 只能用1次
context.save(); //保存了
context.fillStyle = 'green';
//平移 旋转 缩放 2 1 3
context.translate(300, 100);
context.rotate(Math.PI / 4);
context.scale(0.5, 0.5);
context.fillRect(0, 0, 100, 100);
context.restore(); //恢复到刚刚保存的状态，保存恢复 只能用1次
context.save(); //保存了
context.fillStyle = 'yellow';
//平移 旋转 缩放 2 3 1
context.translate(200, 100);
context.rotate(Math.PI / 4);
context.scale(0.5, 0.5);
context.fillRect(0, 0, 100, 100);
context.restore(); //恢复到刚刚保存的状态，保存恢复 只能用1次
context.save(); //保存了
context.fillStyle = 'orange';
//平移 旋转 缩放 3 1 2
context.translate(200, 200);
context.rotate(Math.PI / 4);
context.scale(0.5, 0.5);
context.fillRect(0, 0, 100, 100);
context.restore(); //恢复到刚刚保存的状态，保存恢复 只能用1次
context.save(); //保存了
context.fillStyle = 'purple';
//平移 旋转 缩放 3 2 1
context.translate(300, 300);
context.rotate(Math.PI / 4);
context.scale(0.5, 0.5);
context.fillRect(0, 0, 100, 100);
//实验表明应该移动的是坐标轴
//实验表明缩放的是坐标轴比例
//实验表明旋转的是坐标轴
//综合上述，因此平移 缩放 旋转 三者的顺序不同都将画出不同的结果
}
function draw6(id) {
var canvas = document.getElementById(id);
if(canvas == null)
return false;
var context = canvas.getContext('2d');
context.fillStyle = "#EEEEFF";
context.fillRect(0, 0, 400, 300);
//图形绘制
context.translate(200, 50);
context.fillStyle = 'rgba(255,0,0,0.25)';
for(var i = 0; i < 50; i++) {
//实验表明translate、scale、rotate都是在原有的context属性上调整的
context.translate(25, 25);
context.scale(0.95, 0.95);
context.rotate(Math.PI / 10);
context.fillRect(0, 0, 100, 50);
}
}
function draw7(id) {
var canvas = document.getElementById(id);
var context = canvas.getContext("2d");
context.fillStyle = "#EEEEFF";
context.fillRect(0, 0, 400, 300);
//图形绘制
context.translate(200, 50);
for(var i = 0; i < 50; i++) {
context.translate(25, 25);
context.scale(0.95, 0.95);
context.rotate(Math.PI / 10);
create5Star(context);
context.fill();
}
}
//画五角星
function create5Star(context) {
var n = 0;
var dx = 100;
var dy = 0;
var s = 50;
//创建路径
context.beginPath();
context.fillStyle = 'rgba(255,0,0,0.5)';
var x = Math.sin(0);
var y = Math.cos(0);
var dig = Math.PI / 5 * 4;
for(var i = 0; i < 5; i++) {
var x = Math.sin(i * dig);
var y = Math.cos(i * dig);
context.lineTo(dx + x * s, dy + y * s);
}
context.rotate(Math.PI / 12);
context.closePath();
}
function draw20(id) {
var canvas = document.getElementById(id);
if(canvas == null) {
return false;
}
var context = canvas.getContext('2d');
var interval = setInterval(function() {
move(context);
}, 1);
}
var x = 100; //矩形开始坐标
var y = 100; //矩形结束坐标
var mx = 0; //0右 1左
var my = 0; //0下 1上
var ml = 5; //每次移动的长度
var w = 20; //矩形宽度
var h = 20; //矩形高度
var cw = 400; //canvas宽度
var ch = 300; //canvas高度
function move(context) {
context.clearRect(0, 0, 400, 300);
context.fillStyle = "#EEEEFF";
context.fillRect(0, 0, 400, 300);
context.fillStyle = "red";
context.fillRect(x, y, w, h);
if(mx == 0) {
x = x + ml;
if(x >= cw - w) {
mx = 1;
}
} else {
x = x - ml;
if(x <= 0) {
mx = 0;
}
}
if(my == 0) {
y = y + ml;
if(y >= ch - h) {
my = 1;
}
} else {
y = y - ml;
if(y <= 0) {
my = 0;
}
}
}
//createLinearGradient() 创建线性渐变（用在画布内容上） 定义从黑到白的渐变（从左向右），作为矩形的填充样式：
//四个参数 context.createLinearGradient(x0,y0,x1,y1);
/*x0 渐变开始点的 x 坐标
y0 渐变开始点的 y 坐标
x1 渐变结束点的 x 坐标
y1 渐变结束点的 y 坐标*/
/*addColorStop() 规定渐变对象中的颜色和停止位置
addColorStop(stop,color);
stop 介于 0.0 与 1.0 之间的值，表示渐变中开始与结束之间的位置。
color 在结束位置显示的 CSS 颜色值*/
function draw25(id) {
var canvas = document.getElementById(id);
if(canvas == null) {
return false;
}
var context = canvas.getContext('2d');
var gl = context.createLinearGradient(0, 0, 0, 300);
gl.addColorStop(0, 'rgb(255,0,0'); //红
gl.addColorStop(0.5, 'rgb(0,255,0)'); //绿
gl.addColorStop(1, 'rgb(0,0,255)'); //蓝
//可以把gl对象理解成GDI中线性brush
context.fillStyle = gl;
//在用这个brush来画正方形
context.fillRect(0, 0, 400, 300);
}
/* function draw3(id){
var canvas = document.getElementById(id);
if(canvas == null){
return false;
}
var context = canvas.getContext('2d');
var gl = context.createLinearGradient(0,0,0,300);
gl.addColorStop(0,'rgb(255,255,0)');//浅绿
gl.addColorStop(1,'rgb(0,255,255)');//浅蓝
context.fillStyle = gl;
context.fillRect(0,0,400,300);
var n = 0;
var g2 = context.createLinearGradient(0,0,0,0);
g2.addColorStop(0,'rgba(0,0,255,0.5)');//蓝色
g2.addColorStop(1,'rgba(255,0,0,0.5)');//红色
for(var i = 0;i<10;i++){
context.beginPath();
context.fillStyle=g2;
context.arc(i*25,i*25,i*10,0,Math.pi*2,true);
context.closePath();
context.fill();
}
}*/
function draw3(id) {
var canvas = document.getElementById(id);
if(canvas == null)
return false;
var context = canvas.getContext('2d');
var g1 = context.createLinearGradient(0, 0, 0, 300);
g1.addColorStop(0, 'rgb(255,255,0)'); //浅绿
g1.addColorStop(1, 'rgb(0,255,255)'); //浅蓝
context.fillStyle = g1;
context.fillRect(0, 0, 400, 300);
var n = 0;
var g2 = context.createLinearGradient(0, 0, 300, 0);
g2.addColorStop(0, 'rgba(0,0,255,0.5)'); //蓝色
g2.addColorStop(1, 'rgba(255,0,0,0.5)'); //红色
for(var i = 0; i < 10; i++) {
context.beginPath();
context.fillStyle = g2;
context.arc(i * 25, i * 25, i * 10, 0, Math.PI * 2, true);
context.closePath();
context.fill();
}
}
function draw26(id) {
//同一圆心画球形
/*var canvas = document.getElementById(id);
if(canvas == null){
return false;
}
var context = canvas.getContext('2d');
var gl = context.createRadialGradient(200,150,0,200,150,100);
gl.addColorStop(0.1,'rgb(255,0,0)');
gl.addColorStop(1,'rgb(50,0,0)');
context.fillStyle = gl;
context.beginPath();
context.arc(200,150,100,0,Math.pictureSizes,true);
context.closePath();
context.fill();*/
//不同圆心看径向渐变模型
var canvas = document.getElementById(id);
if(canvas == null) {
return false;
}
var context = canvas.getContext('2d');
var gl = context.createRadialGradient(100, 150, 10, 300, 150, 50);
gl.addColorStop(0.1, 'rgb(255,0,0)');
gl.addColorStop(0.5, 'rgb(0,255,0)');
gl.addColorStop(1, 'rgb(0,0,255)');
context.fillStyle = gl;
context.fillRect(0, 0, 400, 300);
}
function draw4(id) {
var canvas = document.getElementById(id);
if(canvas == null)
return false;
var context = canvas.getContext('2d');
var g1 = context.createRadialGradient(400, 0, 0, 400, 0, 400);
g1.addColorStop(0.1, 'rgb(255,255,0)');
g1.addColorStop(0.3, 'rgb(255,0,255)');
g1.addColorStop(1, 'rgb(0,255,255)');
context.fillStyle = g1;
context.fillRect(0, 0, 400, 300);
var n = 0;
// var g2 = context.createRadialGradient(250, 250, 0, 250, 250, 300);
// g2.addColorStop(0.1, 'rgba(255,0,0,0.5)');
// g2.addColorStop(0.7, 'rgba(255,255,0,0.5)');
// g2.addColorStop(1, 'rgba(0,0,255,0.5)');
for(var i = 0; i < 10; i++) {
var g2 = context.createRadialGradient(i * 25, i * 25, 0, i * 25, i * 25, i * 10);
g2.addColorStop(0.1, 'rgba(255,0,0,0.5)');
g2.addColorStop(0.7, 'rgba(255,255,0,0.5)');
g2.addColorStop(1, 'rgba(0,0,255,0.5)');
context.beginPath();
context.fillStyle = g2;
context.arc(i * 25, i * 25, i * 10, 0, Math.PI * 2, true);
context.fill();
}
}
/* shadowOffsetX 设置或返回阴影距形状的水平距离 :绘制一个矩形，带有向右偏移 具体 像素的阴影（从矩形的 left 位置）：
shadowOffsetY 设置或返回阴影距形状的垂直距离:绘制一个矩形，带有向下偏移 具体 像素的阴影（从矩形的 top 位置）：
shadowColor 设置或返回用于阴影的颜色
shadowBlur 设置或返回用于阴影的模糊级别*/
function draw27(id){
var canvas = document.getElementById(id);
if(canvas == null){
return flase;
}
var context = canvas.getContext('2d');
context.shadowOffsetX = 10;
context.shadowOffsetX = 10;
context.shadowColor = 'rgba(100,100,100,0.5)';
context.shadowBlur = 1.5;
context.fillStyle = 'rgba(255,0,0,0.5)';
context.fillRect(100,100,200,100);
}
function draw11(id) {
var canvas = document.getElementById(id);
if (canvas == null)
return false;
var context = canvas.getContext("2d");
context.fillStyle = "#EEEEFF";
context.fillRect(0, 0, 400, 300);
context.shadowOffsetX = 10;
context.shadowOffsetY = 10;
context.shadowColor = 'rgba(100,100,100,0.5)';
context.shadowBlur =5;
//图形绘制
context.translate(0, 50);
for (var i = 0; i < 3; i++) {
context.translate(50, 50);
create5Star(context);
context.fill();
}
}
/* font 设置或返回文本内容的当前字体属性
ctx.font="40px Arial";在画布上写一段 40 像素的文本，使用的字体是 "Arial"
textBaseline 设置或返回在绘制文本时使用的当前文本基线
alphabetic 默认。文本基线是普通的字母基线。
top 文本基线是 em 方框的顶端。。
hanging 文本基线是悬挂基线。
middle 文本基线是 em 方框的正中。
ideographic 文本基线是表意基线。
bottom 文本基线是 em 方框的底端。
measureText() 返回包含指定文本宽度的对象
strokeText() 在画布上绘制文本（无填充）
context.strokeText(text,x,y,maxWidth);
text 规定在画布上输出的文本。
x 开始绘制文本的 x 坐标位置（相对于画布）。
y 开始绘制文本的 y 坐标位置（相对于画布）。
maxWidth 可选。允许的最大文本宽度，以像素计。*/
function draw17(id){
var canvas = document.getElementById(id);
if(canvas==null){
return false;
}
var context = canvas.getContext('2d');
context.fillStyle = '#eeeeff';
context.fillRect(0,0,400,300);
context.fillStyle = '#00f';
context.font = 'italic 30px sans-serif';
context.textBaseline = 'top';
//填充字符串
var txt = '镜中影花乱舞风';
context.fillText(txt,0,0);
var length = context.measureText(txt);
context.fillText('长'+length.width+'px',0,50);
context.font = 'bolid 30px sans-serif';
txt='stroke示例文1231231231321字';
length=context.measureText(txt);
context.strokeText(txt,0,100);
context.fillText("长" + length.width + "px", 0, 150);
}
function draw18(id) {
var canvas = document.getElementById(id);
if (canvas == null)
return false;
var context = canvas.getContext("2d");
context.fillStyle = "red";
context.save(); //保存了当前context的状态
context.fillStyle = "black";
context.fillRect(0, 0, 100, 100);
context.restore();//恢复到刚刚保存的状态
context.fillRect(0,120,100,100);
}
window.onload = function() {
draw21("canvas21");
draw22("canvas22");
draw23("canvas23");
draw1("canvas1");
draw8("canvas8");
draw2("canvas2");
draw24("canvas24");
draw5("canvas5");
draw6("canvas6");
draw7("canvas7");
draw20("canvas20");
draw25("canvas25");
draw3("canvas3");
draw26("canvas26");
draw4("canvas4");
draw27("canvas27");
draw11("canvas11");
draw17("canvas17");
draw18("canvas18");
};
</script>
</head>
<body>
<section>
<header>
<h1>画矩形</h1></header><canvas id="canvas21" width="400" height="600"></canvas></section>
<section>
<header>
<h1>清除矩形</h1></header><canvas id="canvas22" width="400" height="600"></canvas></section>
<section>
<header>
<h1>绘制路径</h1></header><canvas id="canvas23" width="800" height="400"></canvas></section>
<section>
<header>
<h1>画线test(lineTo moveTo)</h1></header><canvas id="canvas8" width="400" height="400"></canvas></section>
<section>
<header>
<h1>画线demo(lineTo moveTo)</h1></header><canvas id="canvas1" width="400" height="400"></canvas></section>
<section>
<header>
<h1>贝塞尔曲线test</h1></header><canvas id="canvas24" width="400" height="400"></canvas></section>
<section>
<header>
<h1>贝塞尔曲线demo</h1></header><canvas id="canvas2" width="400" height="400"></canvas></section>
<section>
<header>
<h1>平移 test（translate）缩放（scale） 旋转（rotate）</h1></header><canvas id="canvas5" width="400" height="500"></canvas></section>
<section>
<header>
<h1>平移 demo（translate）缩放（scale） 旋转（rotate）</h1></header><canvas id="canvas6" width="400" height="300"></canvas></section>
<section>
<header>
<h1>坐标与路径结合使用</h1></header><canvas id="canvas7" width="400" height="400"></canvas></section>
<section>
<header>
<h1>简单动画</h1></header><canvas id="canvas20" width="400" height="300"></canvas></section>
<section>
<header>
<h1>线性test（createLinearGradient addColorStop）</h1></header><canvas id="canvas25" width="400" height="300"></canvas></section>
<section>
<header>
<h1>线性demo（createLinearGradient addColorStop）</h1></header><canvas id="canvas3" width="400" height="300"></canvas></section>
<section>
<header>
<h1>发散test（createRadialGradient）</h1></header><canvas id="canvas26" width="400" height="300"></canvas></section>
<section>
<header>
<h1>发散demo（createRadialGradient）</h1></header><canvas id="canvas4" width="400" height="300"></canvas></section>
<section>
<header>
<h1>给图像绘制阴影test shadowOffsetX(阴影的横向位移量) shadowOffsetY(盈盈的纵向位移量) shadowColor（阴影的颜色） shadowBlur（阴影的模糊范围）</h1></header><canvas id="canvas27" width="400" height="300"></canvas></section>
<section>
<header>
<h1>给图像绘制阴影demo shadowOffsetX(阴影的横向位移量) shadowOffsetY(盈盈的纵向位移量) shadowColor（阴影的颜色） shadowBlur（阴影的模糊范围）</h1></header><canvas id="canvas11" width="400" height="400"></canvas>
</section>
<section><header><h1>绘制文字fillText strokeText</h1></header><canvas id="canvas17" width="400" height="300"></canvas></section>
<section><header><h1>绘图状态的保存save与恢复restore</h1></header><canvas id="canvas18" width="400" height="300"></canvas></section>
<section><header><h1>保存文件canvas.toDataURL</h1></header><canvas id="canvas19" width="400" height="300"></canvas></section>
</body>
</html>