2016.04.18【H5移动开发】VIP学员作业
发布于：2016-04-19 22:45
作业一：使用径向渐变相关知识点，自由发挥绘制图形后使用径向渐变设置。
作业二：拓展作业
拼图游戏中，图片切割部分，完成：整张图片切割成6等份。
共有5条评论
正序查看
倒序查看
0
今日新帖
0
昨日新帖
42
帖子总数
推荐
换一组
72节H5交互动画精品课程，免费学习！
HTML5 2016-11-01 15:30
<body>
<canvas id="mycanvas" width="500" height="400"></canvas>
</body>
<script>
radientgradient()
function radientgradient(){
var can=document.getElementById("mycanvas")
var ctx=can.getContext('2d');
ctx.translate(can.width/2,can.height/2);
var r=100;
var n=6;
var rotat=Math.PI/3
for(var i=0;i<n;i++)
{
ctx.rotate(rotat);
ctx.save();
ctx.scale(.8,1)
ctx.beginPath();
var grd=ctx.createRadialGradient(0,-r+25,5,0,-r,50);
grd.addColorStop(0,"blue");
grd.addColorStop(.2,"red");
grd.addColorStop(.4,"orange");
grd.addColorStop(.6,"green");
grd.addColorStop(.8,"black");
grd.addColorStop(1,"crimson");
ctx.fillStyle=grd;
ctx.arc(0,-r,50,0,Math.PI*2,true);
ctx.fill();
ctx.restore();
};
}
</script>
<!--开始-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js练习2</title>
<style type="text/css">
canvas{
margin: 5px;
}
</style>
<script type="text/javascript">
//作业一:
//1.脸
function face(){
var face = document.getElementById("c-one").getContext("2d");
var crg = face.createRadialGradient(300,220,50,320,240,200);
crg.addColorStop(0,"lawngreen");
crg.addColorStop(1,"darkgreen");
face.fillStyle = crg;
face.beginPath();
face.arc(320,240,200,0,2*Math.PI);
face.fill();
face.strokeStyle = "deepskyblue";
face.stroke();
face.closePath();
}
//2.左右眼睛
function eyes(){
var eyel = document.getElementById("c-one").getContext("2d");
eyel.fillStyle = "white";
eyel.beginPath();
eyel.arc(270,175,30,0,2*Math.PI);
eyel.fillStyle = "white";
eyel.fill();
eyel.strokeStyle = "lightskyblue";
eyel.stroke();
eyel.closePath();
//
var eyer = document.getElementById("c-one").getContext("2d");
eyer.beginPath();
eyer.arc(370,175,30,0,2*Math.PI);
eyer.fill();
eyer.stroke();
eyer.closePath();
}
//3.嘴巴
function mouth(){
var mouth = document.getElementById("c-one").getContext("2d");
mouth.beginPath();
mouth.arc(320,240,150,0,-1*Math.PI);
mouth.strokeStyle = "skyblue";
mouth.stroke();
mouth.closePath();
}
</script>
</head>
<body onload="face();eyes();mouth()">
<p><canvas id="c-one" height="640" width="640"></canvas></p>
</body>
</html>
<script type="text/javascript">
function radiaFun(){
var ctx=document.getElementById("myC").getContext("2d");
var grd=ctx.createRadialGradient(50,50,10,50,50,90);
ctx.translate(250,200);
for(var i=0;i<5;i++){
grd.addColorStop(0,"blue");
grd.addColorStop(0.5,"red");
grd.addColorStop(1,"yellow");
ctx.fillStyle=grd;
ctx.rotate(72*Math.PI/180);
ctx.fillRect(15,15,100,100);
}
}
</script>
作业二：切割图片
<script type="text/javascript">
function cutFun() {
var idN=1;
for(i=0;i<2;i++){
for(j=0;j<3;j++){
cut(i,j);
}
}
function cut(i,j) {
var ctx = document.getElementById("myC"+idN++).getContext("2d");
var img = document.getElementById("myImg");
ctx.drawImage(img,i*90,j*37,90,37,0,0,90,37);
}
}
</script>
<body onload="cutFun()">
<img id="myImg" src="img/tu.jpg" />
<canvas id="myC1" width="90" height="37" style="border: 1px solid blue;"></canvas>
<canvas id="myC2" width="90" height="37" style="border: 1px solid blue;"></canvas>
<canvas id="myC3" width="90" height="37" style="border: 1px solid blue;"></canvas>
<canvas id="myC4" width="90" height="37" style="border: 1px solid blue;"></canvas>
<canvas id="myC5" width="90" height="37" style="border: 1px solid blue;"></canvas>
<canvas id="myC6" width="90" height="37" style="border: 1px solid blue;"></canvas>
</body>
回复:2016.04.18【H5移动开发】VIP学员作业