<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>画布</title>
<script>
window.onload = function() {
// 画布1
var c=document.getElementById("myCanvas1");
var cxt=c.getContext("2d");
var grd=cxt.createLinearGradient(0,0,0,150); //方法创建线性的渐变对象（只代表渐变与图像大小无关）
grd.addColorStop(0,"#000"); //渐变起始颜色
grd.addColorStop(0.5,"#ccc"); //一半时的颜色
grd.addColorStop(1,"#fff"); //终点颜色
cxt.fillStyle=grd;
cxt.fillRect(0,0,150,100); //绘制一个填充颜色的矩形1x，2y，3宽度，4高度
// 画布2
var c=document.getElementById("myCanvas2");
var cxt=c.getContext("2d");
cxt.moveTo(10,10); //线的起点
cxt.lineTo(150,50); //第一个点的坐标，线会直接连过去
cxt.lineTo(10,50); //第二个点的坐标
cxt.stroke();
// 画布3
var c=document.getElementById("myCanvas3");
var ctx=c.getContext("2d");
var gradient=ctx.createLinearGradient(0,0,150,0); //方法创建线性的渐变对象
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
ctx.strokeStyle=gradient;
ctx.lineWidth=5; //宽度
ctx.strokeRect(5,5,150,100); //该方法按照指定的位置和大小绘制一个矩形的边框（但并不填充矩形的内部）。
// 画布4
var c=document.getElementById("myCanvas4");
var ctx=c.getContext("2d");
var gradient=ctx.createLinearGradient(0,0,150,50); //方法创建线性的渐变对象
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
ctx.strokeStyle=gradient;
ctx.font="30px 宋体";
ctx.strokeText("我勒个去",0,50); //方法在画布上绘制文本（没有填色）。文本的默认颜色是黑色。内容和开始位置
//提示：请使用 font 属性来定义字体和字号，并使用 strokeStyle 属性以另一种颜色/渐变来渲染文本。
// 画布5
var c=document.getElementById("myCanvas5");
var ctx=c.getContext("2d");
var grd=ctx.createRadialGradient(75,80,5,75,80,60); //方法创建放射状/圆形渐变对象。x0 渐变的开始圆的 x 坐标 y0 渐变的开始圆的 y 坐标 r0 开始圆的半径 x1 渐变的结束圆的 x 坐标 y1 渐变的结束圆的 y 坐标 r1 结束圆的半径
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,220); //方法绘制“已填色”的矩形
// 画布6
var c=document.getElementById("myCanvas6");
var ctx=c.getContext("2d");
ctx.fillStyle="#000"; //填充色
ctx.fillRect(0,0,150,100); //方法绘制“已填色”的矩形
ctx.clearRect(50,25,50,50); //清空给定矩形内的指定像素。1 要清除的矩形左上角的 x 坐标 2 要清除的矩形左上角的 y 坐标 3要清除的矩形的宽度，以像素计 4要清除的矩形的高度，以像素计
ctx.clearRect(110,76,10,10);
// 画布7
var c=document.getElementById("myCanvas7");
var ctx=c.getContext("2d");
var gradient=ctx.createLinearGradient(0,0,150,50); //方法创建线性的渐变对象
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
ctx.fillStyle=gradient;
ctx.font="30px 宋体";
ctx.fillText("我勒个去",0,50); //在画布上绘制填色的文本。文本的默认颜色是黑色。
// 画布8
var c=document.getElementById("myCanvas8");
var ctx=c.getContext("2d");
ctx.fillStyle="red";
ctx.fillRect(20,20,75,50);
// 调节透明度
ctx.globalAlpha=0.3;
ctx.fillStyle="blue";
ctx.fillRect(50,50,75,50);
ctx.fillStyle="green";
ctx.fillRect(80,80,75,50);
};
</script>
</head>
<body>
<!-- 画布1 -->
<canvas id="myCanvas1">
Your browser does not support the canvas element.
</canvas>
<!-- 画布2 -->
<canvas id="myCanvas2">
Your browser does not support the canvas element.
</canvas>
<!-- 画布3 -->
<canvas id="myCanvas3">
Your browser does not support the canvas element.
</canvas>
<!-- 画布4 -->
<canvas id="myCanvas4" style="border:1px solid #ccc;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<!-- 画布5 -->
<canvas id="myCanvas5">
Your browser does not support the HTML5 canvas tag.
</canvas>
<!-- 画布6 -->
<canvas id="myCanvas6">
Your browser does not support the HTML5 canvas tag.
</canvas>
<!-- 画布7 -->
<canvas id="myCanvas7">
Your browser does not support the HTML5 canvas tag.
</canvas>
<!-- 画布8 -->
<canvas id="myCanvas8">
Your browser does not support the HTML5 canvas tag.
</canvas>
<!-- svg -->
<svg>
<polygon points="100,10 40,180 190,60 10,60 160,180"
style="fill:red;stroke:blue;stroke-width:3;fill-rule:evenodd;" />
</svg>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>画布</title>
<script>
window.onload = function() {
// 画布1
var c=document.getElementById("myCanvas1");
var cxt=c.getContext("2d");
var grd=cxt.createLinearGradient(0,0,0,150); //方法创建线性的渐变对象（只代表渐变与图像大小无关）
grd.addColorStop(0,"#000"); //渐变起始颜色
grd.addColorStop(0.5,"#ccc"); //一半时的颜色
grd.addColorStop(1,"#fff"); //终点颜色
cxt.fillStyle=grd;
cxt.fillRect(0,0,150,100); //绘制一个填充颜色的矩形1x，2y，3宽度，4高度
// 画布2
var c=document.getElementById("myCanvas2");
var cxt=c.getContext("2d");
cxt.moveTo(10,10); //线的起点
cxt.lineTo(150,50); //第一个点的坐标，线会直接连过去
cxt.lineTo(10,50); //第二个点的坐标
cxt.stroke();
// 画布3
var c=document.getElementById("myCanvas3");
var ctx=c.getContext("2d");
var gradient=ctx.createLinearGradient(0,0,150,0); //方法创建线性的渐变对象
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
ctx.strokeStyle=gradient;
ctx.lineWidth=5; //宽度
ctx.strokeRect(5,5,150,100); //该方法按照指定的位置和大小绘制一个矩形的边框（但并不填充矩形的内部）。
// 画布4
var c=document.getElementById("myCanvas4");
var ctx=c.getContext("2d");
var gradient=ctx.createLinearGradient(0,0,150,50); //方法创建线性的渐变对象
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
ctx.strokeStyle=gradient;
ctx.font="30px 宋体";
ctx.strokeText("我勒个去",0,50); //方法在画布上绘制文本（没有填色）。文本的默认颜色是黑色。内容和开始位置
//提示：请使用 font 属性来定义字体和字号，并使用 strokeStyle 属性以另一种颜色/渐变来渲染文本。
// 画布5
var c=document.getElementById("myCanvas5");
var ctx=c.getContext("2d");
var grd=ctx.createRadialGradient(75,80,5,75,80,60); //方法创建放射状/圆形渐变对象。x0 渐变的开始圆的 x 坐标 y0 渐变的开始圆的 y 坐标 r0 开始圆的半径 x1 渐变的结束圆的 x 坐标 y1 渐变的结束圆的 y 坐标 r1 结束圆的半径
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,220); //方法绘制“已填色”的矩形
// 画布6
var c=document.getElementById("myCanvas6");
var ctx=c.getContext("2d");
ctx.fillStyle="#000"; //填充色
ctx.fillRect(0,0,150,100); //方法绘制“已填色”的矩形
ctx.clearRect(50,25,50,50); //清空给定矩形内的指定像素。1 要清除的矩形左上角的 x 坐标 2 要清除的矩形左上角的 y 坐标 3要清除的矩形的宽度，以像素计 4要清除的矩形的高度，以像素计
ctx.clearRect(110,76,10,10);
// 画布7
var c=document.getElementById("myCanvas7");
var ctx=c.getContext("2d");
var gradient=ctx.createLinearGradient(0,0,150,50); //方法创建线性的渐变对象
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
ctx.fillStyle=gradient;
ctx.font="30px 宋体";
ctx.fillText("我勒个去",0,50); //在画布上绘制填色的文本。文本的默认颜色是黑色。
// 画布8
var c=document.getElementById("myCanvas8");
var ctx=c.getContext("2d");
ctx.fillStyle="red";
ctx.fillRect(20,20,75,50);
// 调节透明度
ctx.globalAlpha=0.3;
ctx.fillStyle="blue";
ctx.fillRect(50,50,75,50);
ctx.fillStyle="green";
ctx.fillRect(80,80,75,50);
};
</script>
</head>
<body>
<!-- 画布1 -->
<canvas id="myCanvas1">
Your browser does not support the canvas element.
</canvas>
<!-- 画布2 -->
<canvas id="myCanvas2">
Your browser does not support the canvas element.
</canvas>
<!-- 画布3 -->
<canvas id="myCanvas3">
Your browser does not support the canvas element.
</canvas>
<!-- 画布4 -->
<canvas id="myCanvas4" style="border:1px solid #ccc;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<!-- 画布5 -->
<canvas id="myCanvas5">
Your browser does not support the HTML5 canvas tag.
</canvas>
<!-- 画布6 -->
<canvas id="myCanvas6">
Your browser does not support the HTML5 canvas tag.
</canvas>
<!-- 画布7 -->
<canvas id="myCanvas7">
Your browser does not support the HTML5 canvas tag.
</canvas>
<!-- 画布8 -->
<canvas id="myCanvas8">
Your browser does not support the HTML5 canvas tag.
</canvas>
<!-- svg -->
<svg>
<polygon points="100,10 40,180 190,60 10,60 160,180"
style="fill:red;stroke:blue;stroke-width:3;fill-rule:evenodd;" />
</svg>
</body>
</html>
