代码语言：javascript复制
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<canvas id="myCanvas" width="80px" height="80px" style="border: 1px solid #000000"></canvas>
<canvas id="myCanvas2"></canvas>
<canvas id="myCanvas3"></canvas>
<canvas id="myCanvas4"></canvas>
<canvas id="myCanvas5"></canvas>
<canvas id="myCanvas6"></canvas>
<script>
<!--原刑渐变-->
var h = document.getElementById("myCanvas6");
var ctx6 = h.getContext("2d");
var grd2 = ctx6.createRadialGradient(50,90,15,90,60,100);
grd2.addColorStop(0,"red");
grd2.addColorStop(1,"white");
ctx6.fillStyle=grd2;
ctx6.fillRect(10,10,150,80);
<!--长方行颜色渐变-->
var g=document.getElementById("myCanvas5");
var ctx5 = g.getContext("2d");
var grad = ctx5.createLinearGradient(0,0,200,0);
grad.addColorStop(1,"red");
grad.addColorStop(0,"white");
ctx5.fillStyle=grad;
ctx5.fillRect(20,20,150,150);
<!--空心文字-->
var f = document.getElementById("myCanvas4");
var ctx4 = f.getContext("2d");
ctx4.font="30px Arial";
ctx4.strokeText("Hello World",10,50);
<!--实心文字-->
var e = document.getElementById("myCanvas3")
<!--获得上下文，并定义文字属性-->
var ctx3= e.getContext("2d");
ctx3.font="30px Arial";
ctx3.textBaseline="hanging";
ctx3.textAlign="ltr";
ctx3.fillText("Hello World",10,50);
<!--画圆-->
var d = document.getElementById("myCanvas2");
var ctx2 = d.getContext("2d");
ctx2.beginPath();
ctx2.arc(95,50,40,0,2*Math.PI);
ctx2.stroke();
<!--画布设置颜色-->
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,35,25);
ctx.moveTo(0,0);
ctx.lineTo(35,25);
ctx.stroke();
</script>
</body>
</html></pre>本文由用户 AnnettaMcca 自行上传分享，仅供网友学习交流。所有权归原作者，若您的权利被侵害，请联系管理员。
转载本站原创文章，请注明出处，并保留原始链接、图片水印。
本站是一个以用户分享为主的开源技术平台，欢迎各类分享！
本文地址：https://www.open-open.com/code/view/1454844796714
HTML 局域网 服务器 web 访问
3 个评论
zhixia 5年前
不错
luomo1991 5年前
只靠视频是学不会HTML5的，这个需要学习当中有实际的操作才能学会，只看视频是学不会的哦，自学是需要很强的毅力和耐心的，在自学中遇到困难的时候，没人帮你解决问题，这方面的问题我们的课程就能避免这些事情，而且我们的课程是免费的，我给大家推荐一个大神前端学习QUN前面一部分数字为四其一，中间一段数字是0儿七，后面一部分是一武4，想学习的人可以加群一起学习下，不想学习的就不用加了。
tcxu 5年前 0
AnnettaMcca, 分别在创建的6个画布上，绘制了不同的内容， 启发人们开发HTML5 canvas 的潜力。本文尽心修改了AnnettaMcca的代码如下:
- 通过CSS 设置:
- 画布的绝对位置;
- 各个画布的平铺叠加顺序 z-index，
- 创建各层的动画效果
体会到分画布创建不同动画元素的优点：
- 可以为每个画布，设置不同的更新频率(相当于创建多个线程)。
- 确定各个画布的平铺叠加顺序 （z-index）可以表达各个画布元素的远近。
myCanvas6产生动画背景，放在了最底层 (z-index:0)，
代码语言：javascript复制<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"><title>Moving Canvas</title>
<script>
var k6=0; //产生动画背景效果、使每次调用m6()时，color6 数组下标更
//用于同心环颜色渐变的数组数据新
var color6= new Array("#0F0","#0F2","#0F4","#0F6", "#0F8","#0FA","#0FC","#0FE","#0FF","#0FE","#0FC","#0FA","#0F8","#0F6","#0F4","#0F2");
function m6(){
<!--原刑渐变-->
var h = document.getElementById("myCanvas6");
var ctx6 = h.getContext("2d");
var grd2 = ctx6.createRadialGradient(80,80,15,80,80,220);
for (var i=0;i<=10;i )
grd2.addColorStop(i/10,color6[(i k6 )%color6.length]);
ctx6.fillStyle=grd2;
ctx6.fillRect(0,0,320,500);
}
//用于同心环颜色渐变的数组数
var color5=new Array("red","#FF6100","#FFFF00","green","blue","#082E54","#A020F0");
var k=0; //产生动画背景效果、使每次调用m5()时，color5 数组下标更
function m5(){
<!--长方行颜色渐变-->
var g=document.getElementById("myCanvas5");
var ctx5 = g.getContext("2d");
var grad = ctx5.createLinearGradient(0,0,500,0);
for (var i=0;i<=10;i )
grad.addColorStop(i/10,color5[(i k )%color5.length]);
ctx5.fillStyle=grad;
ctx5.font="35Px KAITI";
ctx5.fillText("你好，深度开源",10,100);
}
var m4_alpha=0; //产生坐标轴旋转的递增变量
function m4(){
<!--空心文字-->
var f = document.getElementById("myCanvas4");
var ctx4 = f.getContext("2d");
ctx4.clearRect(0,0,f.width,f.height);
ctx4.save();
ctx4.translate(130,150);
ctx4.rotate(Math.PI/180*m4_alpha );
ctx4.font="35px KAITI";
ctx4.strokeText("深度开源",0,0);
ctx4.restore();
}
var font_size=20; //产生文字大小变化的变量
var m3_larger=true; //此变量为真，文字变大，为徦，文字变小
function m3(){
<!--实心文字-->
var e = document.getElementById("myCanvas3")
<!--获得上下文，并定义文字属性-->
var ctx3= e.getContext("2d");
ctx3.clearRect(0,0,e.width,e.height);
ctx3.font=font_size "px Arial";
if (m3_larger) font_size ; else font_size--;
if(font_size==30) m3_larger=false;
if (font_size==20) m3_larger=true;
ctx3.fillStyle="orange";
ctx3.fillText("Hello, Open Source",5,30);
}
var m2_x0=0; //造成园的横坐标变化
var m2_eastward=true; //变量为真，横坐标变大，园往西走
function m2(){ <!--画圆-->
var d = document.getElementById("myCanvas2");
var ctx2 = d.getContext("2d");
ctx2.clearRect(0,0,d.width,d.height);
ctx2.beginPath();
ctx2.arc(95 m2_x0, 50, 40,0,2*Math.PI);
//ctx2.fillStyle="green";
var grd2 = ctx2.createRadialGradient(95 m2_x0,50,5,
95 m2_x0, 50, 40);
grd2.addColorStop(0,"white");
grd2.addColorStop(1,"green");
ctx2.fillStyle=grd2;
ctx2.fill();
ctx2.stroke();
if (m2_eastward) m2_x0 ; else m2_x0--;
if (m2_x0==100) m2_eastward=false;
if (m2_x0==0) m2_eastward=true;
}
var m1_x=0; //造成直线和红长方形末端变化的 x 坐标
var m1_y=0; //造成直线和红长方形末端变化的 y 坐标
var m1_increase=true; //控制直线和红方块末端变化的布尔变量
function m1(){
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.clearRect(0,0,c.width,c.height);
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0, m1_x 35,m1_y 25);
ctx.beginPath(); //必须的
ctx.moveTo(0,0);
ctx.lineTo(m1_x 35,m1_y 25);
ctx.stroke();
if (m1_increase) {m1_x ; m1_y ;}
else { m1_x--; m1_y--;};
if (m1_x==45) m1_increase=false;
if (m1_y==0) m1_increase=true;
}
function ani(){
//设置各个画布更新的频度
setInterval('m1()',200);
setInterval('m2()',300);
setInterval('m3()',400);
setInterval('m4()',500);
setInterval('m5()',600);
setInterval('m6()',700);
}
</script>
<style>
#myCanvas{
z-index:1;
position:absolute;left:0;top:0;
}
#myCanvas2{
z-index:2;
position:absolute;left:80px;top:0;
}
#myCanvas3{
z-index:3;
position:absolute;left:0;top:90px;
}
#myCanvas4{
z-index:4;
position:absolute;left:0;top:100px;
}
#myCanvas5{
z-index:5;
position:absolute;left:0;top:300px;
}
#myCanvas6{
position:absolute;
left:0px;
top:0px;
z-index:0;
}
</style>
</head>
<body onLoad="ani()">
<canvas id="myCanvas" width="80px" height="80px" style="border: 1px solid #000000"></canvas>
<canvas id="myCanvas2"></canvas>
<canvas id="myCanvas3"></canvas>
<canvas id="myCanvas4" width="300px" height="300px"></canvas>
<canvas id="myCanvas5"></canvas>
<canvas id="myCanvas6" width="320px" height="410px"></canvas>
</body>
</html>
