JavaScript

超轻量级php框架startmvc

html5 canvas 详细使用教程

更新时间:2020-04-21 00:04:06 作者:startmvc
话不多说,请看代码<!DOCTYPEhtml"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><title>

话不多说,请看代码


<!DOCTYPE html ">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title></title>
 <script type="text/javascript">
 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.strokeStyle = "blue";
 context.fillRect(0, 120, 100, 100);
 context.strokeRect(120, 120, 100, 100);
 //设置透明度实践证明透明度值>0,<1值越低,越透明,值>=1时为纯色,值<=0时为完全透明
 context.fillStyle = "rgba(255,0,0,0.2)";
 context.strokeStyle = "rgba(255,0,0,0.2)";
 context.fillRect(240,0 , 100, 100);
 context.strokeRect(240, 120, 100, 100);
 }
 function draw22(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.strokeStyle = "blue";
 context.fillRect(0, 120, 100, 100);
 context.strokeRect(120, 120, 100, 100);
 //设置透明度实践证明透明度值>0,<1值越低,越透明,值>=1时为纯色,值<=0时为完全透明
 context.fillStyle = "rgba(255,0,0,0.2)";
 context.strokeStyle = "rgba(255,0,0,0.2)";
 context.fillRect(240, 0, 100, 100);
 context.strokeRect(240, 120, 100, 100);
 context.clearRect(50, 50, 240, 120);
 }
 function draw23(id) {
 var canvas = document.getElementById(id);
 if (canvas == null) {
 return false;
 }
 var context = canvas.getContext('2d');
 var n = 0;
 //左侧1/4圆弧
 context.beginPath();
 context.arc(100, 150, 50, 0, Math.PI/2 , false);
 context.fillStyle = 'rgba(255,0,0,0.25)';
 context.fill();
 context.strokeStyle = 'rgba(255,0,0,0.25)'
 context.closePath();
 context.stroke();
 //右侧1/4圆弧
 context.beginPath();
 context.arc(300, 150, 50, 0, Math.PI/2 , false);
 context.fillStyle = 'rgba(255,0,0,0.25)';
 context.fill();
 context.strokeStyle = 'rgba(255,0,0,0.25)';
 context.closePath();
 context.stroke();
 }
 function draw0(id) {
 var canvas = document.getElementById(id);
 if (canvas == null) {
 return false;
 }
 var context = canvas.getContext('2d');
 context.beginPath();
 context.arc(200, 150, 100, 0, Math.PI * 2, true);
 //不关闭路径路径会一直保留下去,当然也可以利用这个特点做出意想不到的效果
 context.closePath();
 context.fillStyle = 'rgba(0,255,0,0.25)';
 context.fill();
 }
 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 n = 0;
 var dx = 150;
 var dy = 150;
 var s = 100;
 context.beginPath();
 context.fillStyle = 'rgb(100,255,100)';
 context.strokeStyle = '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 < 30; 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 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 draw24(id) {
 var canvas = document.getElementById(id);
 if (canvas == null) {
 return false;
 }
 var context = canvas.getContext("2d");
 context.moveTo(50, 50);
 context.bezierCurveTo(50, 50,150, 50, 150, 150);
 context.stroke();
 context.quadraticCurveTo(150, 250, 250, 250);
 context.stroke();
 }
 function draw25(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,0,0)'); //红 
 g1.addColorStop(0.5, 'rgb(0,255,0)');//绿
 g1.addColorStop(1, 'rgb(0,0,255)'); //蓝
 //可以把lg对象理解成GDI中线性brush
 context.fillStyle = g1;
 //再用这个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 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 g1 = context.createRadialGradient(200, 150, 0, 200, 150, 100);
 g1.addColorStop(0.1, 'rgb(255,0,0)'); 
 g1.addColorStop(1, 'rgb(50,0,0)');
 context.fillStyle = g1;
 context.beginPath();
 context.arc(200, 150, 100, 0, Math.PI * 2, true);
 context.closePath();
 context.fill();*/
 //不同圆心看径向渐变模型
 var canvas = document.getElementById(id);
 if (canvas == null)
 return false;
 var context = canvas.getContext('2d');
 var g1 = context.createRadialGradient(100, 150, 10, 300, 150, 50);
 g1.addColorStop(0.1, 'rgb(255,0,0)');
 g1.addColorStop(0.5, 'rgb(0,255,0)');
 g1.addColorStop(1, 'rgb(0,0,255)');
 context.fillStyle = g1;
 context.fillRect(0, 0, 400, 300);
 }
 function draw27(id) {
 var canvas = document.getElementById(id);
 if (canvas == null)
 return false;
 var context = canvas.getContext('2d');
 context.shadowOffsetX = 10;
 context.shadowOffsetY = 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 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();
 }
 }
 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 = "rgba(255,0,0,0.1)";
 //平移 缩放 旋转 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(); //恢复到刚刚保存的状态,保存恢复只能使用一次
 context.save(); //保存了当前context的状态
 context.fillStyle = "rgba(255,0,0,0.2)";
 //平移 旋转 缩放 1 3 2
 context.translate(100, 100);
 context.rotate(Math.PI / 4);
 context.scale(0.5, 0.5);
 context.fillRect(0, 0, 100, 100);
 context.restore(); //恢复到刚刚保存的状态
 context.save(); //保存了当前context的状态
 context.fillStyle = "rgba(255,0,0,0.3)";
 //缩放 平移 旋转 2 1 3 
 context.scale(0.5, 0.5);
 context.translate(100, 100);
 context.rotate(Math.PI / 4);
 context.fillRect(0, 0, 100, 100);
 context.restore(); //恢复到刚刚保存的状态
 context.save(); //保存了当前context的状态
 context.fillStyle = "rgba(255,0,0,0.4)";
 //缩放 旋转 平移 2 3 1 
 context.scale(0.5, 0.5);
 context.rotate(Math.PI / 4);
 context.translate(100, 100);
 context.fillRect(0, 0, 100, 100);
 context.restore(); //恢复到刚刚保存的状态
 context.save(); //保存了当前context的状态
 context.fillStyle = "rgba(255,0,0,0.5)";
 //旋转 平移 缩放 3 1 2 
 context.rotate(Math.PI / 4);
 context.translate(100, 100);
 context.scale(0.5, 0.5);
 context.fillRect(0, 0, 100, 100);
 context.restore(); //恢复到刚刚保存的状态
 context.save(); //保存了当前context的状态
 context.fillStyle = "rgba(255,0,0,1)";
 //旋转 缩放 平移 3 2 1 
 context.rotate(Math.PI / 4);
 context.scale(0.5, 0.5);
 context.translate(100, 100);
 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 draw8(id) {
 var canvas = document.getElementById(id);
 if (canvas == null)
 return false;
 var context = canvas.getContext("2d");
 //context.beginPath();
 context.strokeStyle = "rgb(250,0,0)";
 context.fillStyle = "rgb(250,0,0)"
 //实验证明第一次lineTo的时候和moveTo功能一样
 context.lineTo(100, 100);
 //之后的lineTo会以上次lineTo的节点为开始
 context.lineTo(200, 200);
 context.lineTo(200, 100);
 context.moveTo(200, 50);
 context.lineTo(100,50);
 context.stroke();
 }
 function draw9(id) {
 var canvas = document.getElementById(id);
 if (canvas == null)
 return false;
 var context = canvas.getContext("2d");
 //定义颜色
 var colors = ["red", "orange", "yellow", "green", "blue", "navy", "perple"];
 //定义线宽
 context.lineWidth = 10;
 context.transform(1,0,0,1,100,0)
 //循环绘制圆弧
 for (var i = 0; i < colors.length; i++) {
 //定义每次向下移动10个像素的变换矩阵
 context.transform(1, 0, 0, 1, 0, 10);
 //设定颜色
 context.strokeStyle = colors[i];
 context.beginPath();
 context.arc(50, 100, 100, 0, Math.PI, true);
 context.stroke();
 }
 }
 function draw10(id) {
 var canvas = document.getElementById(id);
 if (canvas == null) {
 return false;
 }
 var context = canvas.getContext("2d");
 var oprtns = new Array(
 "source-over",
 "destination-over",
 "source-in",
 "destination-in",
 "source-out",
 "destination-out",
 "source-atop",
 "destination-atop",
 "lighter",
 "xor", 
 "copy"
 );
 var i = 0;//组合效果编号
 //结合setinterval动态显示组合
 var interal = setInterval(function () {
 if (i == 10) {
 i=0;
 }
 else {
 i++;
 }
 //每次重绘前清空
 context.clearRect(0,0,400,300)
 //蓝色矩形
 context.fillStyle = "blue";
 context.fillRect(10, 10, 60, 60);
 //设置组合方式 
 context.globalCompositeOperation = oprtns[i];
 //设置新图形(红色圆形)
 context.beginPath();
 context.fillStyle = "red";
 context.arc(60, 60, 30, 0, Math.PI * 2, false);
 context.fill();
 }, 1000);
 }
 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.closePath();
 }
 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();
 }
 }
 //drawImage(image,x,y)
 function draw28(id) {
 var image = new Image();
 image.src = "http://pic002.cnblogs.com/images/2012/407398/2012080410383846.png";
 var canvas = document.getElementById(id);
 if (canvas == null)
 return false;
 var context = canvas.getContext("2d");
 context.fillStyle = "#EEEEFF";
 context.fillRect(0, 0, 400, 300);
 image.onload = function () {
 context.drawImage(image,0,0);
 }
 }
 //drawImage(image,x,y,w,h)
 function draw12(id) {
 var image = new Image();
 image.src = "http://pic002.cnblogs.com/images/2012/407398/2012080410383846.png";
 var canvas = document.getElementById(id);
 if (canvas == null)
 return false;
 var context = canvas.getContext("2d");
 context.fillStyle = "#EEEEFF";
 context.fillRect(0, 0, 400, 300);
 image.onload = function () {
 context.drawImage(image, 50, 50, 300, 200);
 }
 }
 //drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh)
 function draw13(id){
 var image = new Image();
 image.src = "http://pic002.cnblogs.com/images/2012/407398/2012080410383846.png";
 var canvas = document.getElementById(id);

 if (canvas == null)
 return false;
 var context = canvas.getContext("2d");
 context.fillStyle = "#EEEEFF";

 context.fillRect(0, 0, 400, 300);
 image.onload = function () {
 context.drawImage(image, 100, 100, 200, 150,50,50,300,200);//这里取的是实际尺寸
 }
 }
 function draw14(id) {
 //传统的平铺是用for循环来处理的,现在直接调用接口
 var image = new Image();
 var canvas = document.getElementById(id);
 if (canvas == null)
 return false;
 var context = canvas.getContext("2d");
 var type = ["no-repeat", "repeat-x", "repeat-y", "repeat"];
 var i = 0;
 image.src = "http://pic002.cnblogs.com/images/2012/407398/2012080410383846.png";
 image.onload = function () {
 var interval = setInterval(function () {
 //每次转换平铺类型清空
 context.clearRect(0, 0, 400, 300);
 if (i >= 4) {
 i = 0;
 }
 var ptrn = context.createPattern(image, type[i]);
 context.fillStyle = ptrn;
 context.fillRect(0, 0, 400, 300);
 i++;
 }, 1000);
 };
 }
 //图像裁剪
 function draw15(id) {
 var canvas = document.getElementById(id);
 if (canvas == null)
 return false;
 var context = canvas.getContext("2d");
 context.fillStyle = "black";
 context.fillRect(0, 0, 400, 300);
 image = new Image();
 image.onload = function () {
 drawImg(context,image);
 }
 image.src = "http://pic002.cnblogs.com/images/2012/407398/2012080410383846.png"
 }
 function drawImg(context, image) {
 //圆形裁剪区
 //createCircleClip(context)
 //星形裁剪区
 create5StarClip(context);
 context.drawImage(image,0,0);
 }
 function createCircleClip(context) {
 context.beginPath();
 context.arc(200, 150, 100, 0, Math.PI * 2, true);
 context.closePath();
 context.clip();
 }
 function create5StarClip(context) {
 var n = 0;
 var dx = 200;
 var dy = 135;
 var s = 150;
 context.beginPath();
 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.closePath();
 context.clip();
 }
 function draw16(id) {
 var canvas = document.getElementById(id);
 if (canvas == null)
 return false;
 var context = canvas.getContext("2d");
 context.fillStyle = 'red'
 //在右下角画一个正方形
 context.fillRect(250,250,150,50);
 var image = new Image();
 image.src = "http://pic002.cnblogs.com/images/2012/407398/2012080410383846.png";
 image.onload = function () {
 //在左上角画一幅图片
 context.drawImage(image, 0, 0,200,200);
 //实验证明imagedata取的是canvas所在范围画的图形,不止是图片
 //不会取该区域内是空白的canvas的像素
 var imagedata = context.getImageData(0, 0, 400, 300);
 //修改imagedata
 for (var i = 0, n = imagedata.data.length; i < n; i += 4) {
 imagedata.data[i + 0] = 255 - imagedata.data[i + 0]; //red;
 imagedata.data[i + 1] = 255 - imagedata.data[i + 1]; //green
 imagedata.data[i + 2] = 255 - imagedata.data[i + 2]; //blue
 //imagedata.data[i + 3] = 255 - imagedata.data[i + 3]; //a
 }
 context.putImageData(imagedata,0 ,0,100,100,300,200);
 }
 }
 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="fill示例文字"
 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示例文字";
 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);
 }
 function draw19(id) {
 var canvas = document.getElementById(id);
 if (canvas == null)
 return false;
 var context = canvas.getContext("2d");
 context.fillStyle = "rgb(0,0,225)";
 context.fillRect(0, 0, canvas.width, canvas.height);
 context.fillStyle = "rgb(255,255,0)";
 context.fillRect(10, 20, 50, 50);
 //把图像保存到新的窗口
 var w=window.open(canvas.toDataURL("http://pic002.cnblogs.com/images/2012/407398/2012080410383846.png"),"smallwin","width=400,height=350");
 }
 function draw20(id) {
 var canvas = document.getElementById(id);
 if (canvas == null)
 return false;
 var context = canvas.getContext("2d");
 var interal = setInterval(function () {
 move(context);
 }, 1);
 }
 var x = 100;//矩形开始坐标
 var y = 100;//矩形结束坐标
 var mx = 0;//0右1左
 var my = 0; //0下1上
 var ml = 1;//每次移动长度
 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;
 }
 }
 }
 window.onload = function () {
 draw21("canvas21");
 draw22("canvas22");
 draw23("canvas23");
 draw24("canvas24");
 draw25("canvas25");
 draw26("canvas26");
 draw27("canvas27");
 draw28("canvas28");
 draw0("canvas0");
 draw1("canvas1");
 draw2("canvas2");
 draw3("canvas3");
 draw4("canvas4");
 draw5("canvas5");
 draw6("canvas6");
 draw8("canvas8");
 draw7("canvas7");
 draw9("canvas9");
 draw10("canvas10");
 draw11("canvas11");
 draw12("canvas12");
 draw13("canvas13");
 draw14("canvas14");
 draw15("canvas15");
 draw16("canvas16");
 draw17("canvas17");
 draw18("canvas18");
 draw19("canvas19");
 draw20("canvas20");
 }
 </script>
</head>
<body>
 <section><header><h1>画矩形</h1></header><canvas id="canvas21" width="400" height="300"></canvas></section>
 <section><header><h1>清除矩形</h1></header><canvas id="canvas22" width="400" height="300"></canvas></section>
 <section><header><h1>绘制路径</h1></header><canvas id="canvas23" width="400" height="300"></canvas></section>
 <section><header><h1>画圆()</h1></header><canvas id="canvas0" width="400" height="300"></canvas></section>
 <section><header><h1>画线test(lineTo moveTo)</h1></header><canvas id="canvas8" width="400" height="300"></canvas></section>
 <section><header><h1>画线demo(lineTo moveTo)</h1></header><canvas id="canvas1" width="400" height="300"></canvas></section>
 <section><header><h1>贝塞尔曲线test(bezierCurveTo)</h1></header><canvas id="canvas24" width="400" height="300"></canvas></section>
 <section><header><h1>贝塞尔曲线demo(bezierCurveTo)</h1></header><canvas id="canvas2" 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(translate)缩放(scale) 旋转(rotate)</h1></header><canvas id="canvas5" width="400" height="300"></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="300"></canvas></section>
 <section><header><h1>矩阵变换</h1></header><canvas id="canvas9" width="400" height="300"></canvas></section>
 <section><header><h1>图形组合叠加(globalCompositeOperation)</h1></header><canvas id="canvas10" 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="300"></canvas></section>
 <section><header><h1>绘制图像drawImage(image,x,y)</h1></header><canvas id="canvas28" width="400" height="300"></canvas></section>
 <section><header><h1>绘制图像drawImage(image,x,y,w,h)</h1></header><canvas id="canvas12" width="400" height="300"></canvas></section>
 <section><header><h1>绘制局部图像drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh)</h1></header><canvas id="canvas13" width="400" height="300"></canvas></section>
 <section><header><h1>图像平铺</h1></header><canvas id="canvas14" width="400" height="300"></canvas></section>
 <section><header><h1>图像裁剪clip</h1></header><canvas id="canvas15" width="400" height="300"></canvas></section>
 <section><header><h1>像素处理getImageData</h1></header><canvas id="canvas16" width="400" height="300"></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>
 <section><header><h1>简单动画</h1></header><canvas id="canvas20" width="400" height="300"></canvas></section>
</body>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持脚本之家!

html5 canvas