VIP区

2016.04.19【H5移动开发】VIP学员作业

头像
CrazyPotato
2016-04-19 22:47:21

作业一：掌握角度与弧度之前换算的公式

作业二：1、画一个矩形作为原有图形   【作为第一个图形】    

              2、画一个圆作为第二个图形     

             3、这2个图形进行遮盖，使用5个典型的遮盖属性值，体现具体效果。

备注：作业二要求贴图。

全部回复
正序查看
头像
吉林王族

<style>

body{ padding-top:20px;}

canvas{ float:left;}

</style>

</head>


<body>


<canvas id="myCanvas1" width="300" height="400"></canvas>

<canvas id="myCanvas2" width="300" height="400"></canvas>

<canvas id="myCanvas3" width="300" height="400"></canvas>

<canvas id="myCanvas4" width="300" height="400"></canvas>

<canvas id="myCanvas5" width="300" height="400"></canvas>

<canvas id="myCanvas6" width="300" height="400"></canvas>

<canvas id="myCanvas7" width="300" height="400"></canvas>

<canvas id="myCanvas8" width="300" height="400"></canvas>

<canvas id="myCanvas9" width="300" height="400"></canvas>


</body>

<script>


var idN=1;

      cover("")

      cover("source-over")

      cover("destination-over");

      cover("source-in")

      cover("destination-in");

      cover("source-out")

 cover("destination-out")

      cover("source-atop")

 cover("destination-atop")

 

 

function cover(type){

 var ctx=document.getElementById('myCanvas'+idN++).getContext('2d');

 ctx.save();

 ctx.fillStyle="blue";

      ctx.fillRect(0,0,200,200);

 ctx.translate(50,50)

 

 ctx.rotate(0.5);

 ctx.fillStyle="yellow";

 ctx.globalCompositeOperation=type

 ctx.fillRect(0,0,180,180)

 ctx.restore();

 

 

 ctx.fillStyle="crimson";

 ctx.font="28px Arial";

 if(type=="")type="默认(source-over)"

 ctx.fillText(type,10,320)

 

  } 

 

  

  </script>

undefined8d33b9e0aa171b7d5fc26fa6d204b0bd002.png



2016-04-20 09:55:28
...
头像
陆文姣

好厉害B_03.gif

2016-04-20 19:11:33
...
头像
大坏蛋

<!--开始-->
<!--
作业一:换算公式为ctx.rotate(20*Math.PI/180);
-->
<!DOCTYPE html>
<html>

 <head>
  <meta charset="UTF-8">
  <title>js练习</title>
  <style type="text/css">
   canvas {
    height: 500;
    width: 500;
    margin: 5px;
   }
  </style>
 </head>
 <body>
  <p>
   <canvas id="c-one" width="300" height="300"></canvas>
   <canvas id="c-two" width="300" height="300"></canvas>
   <canvas id="c-three" width="300" height="300"></canvas>
  </p>
  <p>
   <canvas id="c-four" width="300" height="300"></canvas>
   <canvas id="c-five" width="300" height="300"></canvas>
   <canvas id="c-six" width="300" height="300"></canvas>
  </p>
  <p>
   <canvas id="c-seven" width="300" height="300"></canvas>
  </p>
  <script type="text/javascript">
//作业二:1.画矩形
   var ctx = document.getElementById("c-one").getContext("2d");
   ctx.translate(100,150);
   ctx.strokeRect(0, 0, 150, 100);
   ctx.fillStyle = "palevioletred";
   ctx.fillRect(0, 0, 150, 100);
//作业二:2.加入圆形和旋转   
   var ctx = document.getElementById("c-two").getContext("2d");
   ctx.translate(100,100);
   ctx.rotate(15*Math.PI/180);
   ctx.strokeRect(0, 0, 150, 100);
   ctx.fillStyle = "palevioletred";
   ctx.fillRect(0, 0, 150, 100);
//   
   ctx.beginPath();
   ctx.arc(80,90,70,0,2*Math.PI,false);
   ctx.closePath();
   ctx.fillStyle = "mediumpurple";
   ctx.fill();
//作业二:3.五种样式
//(1)
   var ctx = document.getElementById("c-three").getContext("2d");
   ctx.translate(100,100);
   ctx.rotate(15*Math.PI/180);
   ctx.strokeRect(0, 0, 150, 100);
   ctx.fillStyle = "palevioletred";
   ctx.fillRect(0, 0, 150, 100);
//   
   ctx.globalCompositeOperation = "destination-out";
//   
   ctx.beginPath();
   ctx.arc(80,90,70,0,2*Math.PI,false);
   ctx.closePath();
   ctx.fillStyle = "mediumpurple";
   ctx.fill();
//(2)
   var ctx = document.getElementById("c-four").getContext("2d");
   ctx.translate(100,100);
   ctx.rotate(15*Math.PI/180);
   ctx.strokeRect(0, 0, 150, 100);
   ctx.fillStyle = "palevioletred";
   ctx.fillRect(0, 0, 150, 100);
//   
   ctx.globalCompositeOperation = "source-atop";
//   
   ctx.beginPath();
   ctx.arc(80,90,70,0,2*Math.PI,false);
   ctx.closePath();
   ctx.fillStyle = "mediumpurple";
   ctx.fill();
//(3)
   var ctx = document.getElementById("c-five").getContext("2d");
   ctx.translate(100,100);
   ctx.rotate(15*Math.PI/180);
   ctx.strokeRect(0, 0, 150, 100);
   ctx.fillStyle = "palevioletred";
   ctx.fillRect(0, 0, 150, 100);
//   
   ctx.globalCompositeOperation = "destination-over";
//   
   ctx.beginPath();
   ctx.arc(80,90,70,0,2*Math.PI,false);
   ctx.closePath();
   ctx.fillStyle = "mediumpurple";
   ctx.fill();
//(4)
   var ctx = document.getElementById("c-six").getContext("2d");
   ctx.translate(100,100);
   ctx.rotate(15*Math.PI/180);
   ctx.strokeRect(0, 0, 150, 100);
   ctx.fillStyle = "palevioletred";
   ctx.fillRect(0, 0, 150, 100);
//   
   ctx.globalCompositeOperation = "xor";
//   
   ctx.beginPath();
   ctx.arc(80,90,70,0,2*Math.PI,false);
   ctx.closePath();
   ctx.fillStyle = "mediumpurple";
   ctx.fill();
//(5)
   var ctx = document.getElementById("c-seven").getContext("2d");
   ctx.translate(100,100);
   ctx.rotate(15*Math.PI/180);
   ctx.strokeRect(0, 0, 150, 100);
   ctx.fillStyle = "palevioletred";
   ctx.fillRect(0, 0, 150, 100);
//   
   ctx.globalCompositeOperation = "source-out";
//   
   ctx.beginPath();
   ctx.arc(80,90,70,0,2*Math.PI,false);
   ctx.closePath();
   ctx.fillStyle = "mediumpurple";
   ctx.fill();
  </script>
 </body>
</html>
<!--结束-->

2016-04-22 18:33:24
...
头像
大坏蛋
css里的height,width是废话，去掉它，这个貌似不能编辑的
2016-04-23 11:49:11
...
头像
大坏蛋
经检验，css无法对canvas进行长宽设置
2016-04-24 01:08:46
...
头像
大坏蛋
以下是改良版
2016-06-01 22:03:02
...
头像
大坏蛋

2016-06-01 22:06:48
...
头像
大坏蛋
啥情况，那么改良版见另一个回复贴。
2016-06-01 22:07:56
...
头像
大坏蛋

cb5e75913a44f342847f776f86658825002.png

bd2af6d2595964d9d6fa178c66185bdd002.png

2016-04-22 18:34:47
...
头像
h6896

function compFun() {

var ctx = document.getElementById("myC1").getContext("2d");

ctx.fillStyle = "blueviolet";

ctx.fillRect(20, 20, 80, 60);

ctx.globalCompositeOperation = "source-over";

ctx.fillStyle = "red";

ctx.arc(50, 30, 30, 0, 2 * Math.PI, false);

ctx.fill();

var ctx = document.getElementById("myC2").getContext("2d");

ctx.fillStyle = "blueviolet";

ctx.fillRect(20, 20, 80, 60);

ctx.globalCompositeOperation = "destination-over";

ctx.fillStyle = "red";

ctx.arc(50, 30, 30, 0, 2 * Math.PI, false);

ctx.fill();

var ctx = document.getElementById("myC3").getContext("2d");

ctx.fillStyle = "blueviolet";

ctx.fillRect(20, 20, 80, 60);

ctx.globalCompositeOperation = "source-in";

ctx.fillStyle = "red";

ctx.arc(50, 30, 30, 0, 2 * Math.PI, false);

ctx.fill();

var ctx = document.getElementById("myC4").getContext("2d");

ctx.fillStyle = "blueviolet";

ctx.fillRect(20, 20, 80, 60);

ctx.globalCompositeOperation = "destination-in";

ctx.fillStyle = "red";

ctx.arc(50, 30, 30, 0, 2 * Math.PI, false);

ctx.fill();

var ctx = document.getElementById("myC5").getContext("2d");

ctx.fillStyle = "blueviolet";

ctx.fillRect(20, 20, 80, 60);

ctx.globalCompositeOperation = "source-out";

ctx.fillStyle = "red";

ctx.arc(50, 30, 30, 0, 2 * Math.PI, false);

ctx.fill();

var ctx = document.getElementById("myC6").getContext("2d");

ctx.fillStyle = "blueviolet";

ctx.fillRect(20, 20, 80, 60);

ctx.globalCompositeOperation = "destination-out";

ctx.fillStyle = "red";

ctx.arc(50, 30, 30, 0, 2 * Math.PI, false);

ctx.fill();

var ctx = document.getElementById("myC7").getContext("2d");

ctx.fillStyle = "blueviolet";

ctx.fillRect(20, 20, 80, 60);

ctx.globalCompositeOperation = "source-atop";

ctx.fillStyle = "red";

ctx.arc(50, 30, 30, 0, 2 * Math.PI, false);

ctx.fill();

var ctx = document.getElementById("myC8").getContext("2d");

ctx.fillStyle = "blueviolet";

ctx.fillRect(20, 20, 80, 60);

ctx.globalCompositeOperation = "destination-atop";

ctx.fillStyle = "red";

ctx.arc(50, 30, 30, 0, 2 * Math.PI, false);

ctx.fill();

var ctx = document.getElementById("myC9").getContext("2d");

ctx.fillStyle = "blueviolet";

ctx.fillRect(20, 20, 80, 60);

ctx.globalCompositeOperation = "copy";

ctx.fillStyle = "red";

ctx.arc(50, 30, 30, 0, 2 * Math.PI, false);

ctx.fill();

var ctx = document.getElementById("myC10").getContext("2d");

ctx.fillStyle = "blueviolet";

ctx.fillRect(20, 20, 80, 60);

ctx.globalCompositeOperation = "xor";

ctx.fillStyle = "red";

ctx.arc(50, 30, 30, 0, 2 * Math.PI, false);

ctx.fill();

var ctx = document.getElementById("myC11").getContext("2d");

ctx.fillStyle = "blueviolet";

ctx.fillRect(20, 20, 80, 60);

ctx.globalCompositeOperation = "lighter";

ctx.fillStyle = "red";

ctx.arc(50, 30, 30, 0, 2 * Math.PI, false);

ctx.fill();

var ctx = document.getElementById("myC12").getContext("2d");

ctx.fillStyle = "blueviolet";

ctx.fillRect(20, 20, 80, 60);

ctx.globalCompositeOperation = "darker";

ctx.fillStyle = "red";

ctx.arc(50, 30, 30, 0, 2 * Math.PI, false);

ctx.fill();

ctx.shadowColor="blue";

ctx.shadowBlur=2;

ctx.shadowOffsetX=5;

ctx.shadowOffsetY=3

ctx.font="10px Arial"

ctx.fillStyle="chocolate"

ctx.fillText("darker",20,90);

}

af8e349d90c4e7b2cd74065d3ebed832002.png


我只能写成这样的，簇簇那样的写总是报错。

2016-04-25 00:34:28
...
头像
CrazyPotato
族族的怎么会报错，是不是你代码地方放错了？
2016-06-02 19:47:06
...
头像
h6896
犯了个低级的错误，js写在head里面的，后面没调用
2016-06-03 18:35:56
...
头像
大坏蛋

<!--作业一:换算公式为ctx.rotate(20*Math.PI/180);-->

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>2016.4.19 JavaScript练习</title>

<style type="text/css">

canvas {

margin: 5px;

}

</style>

</head>

<body>

<p>

<canvas id="c-one" width="300" height="300"></canvas>

<canvas id="c-two" width="300" height="300"></canvas>

<canvas id="c-three" width="300" height="300"></canvas>

</p>

<p>

<canvas id="c-four" width="300" height="300"></canvas>

<canvas id="c-five" width="300" height="300"></canvas>

<canvas id="c-six" width="300" height="300"></canvas>

</p>

<p>

<canvas id="c-seven" width="300" height="300"></canvas>

</p>

<script type="text/javascript">

// 作业二:1.画矩形

function drawRec(recId, recCon) {

var ctx = document.getElementById(recId).getContext(recCon);

ctx.translate(100,150);

ctx.strokeRect(0, 0, 150, 100);

ctx.fillStyle = "palevioletred";

ctx.fillRect(0, 0, 150, 100);

}

drawRec("c-one", "2d");

// 作业二:2-1.定义矩形，圆形的旋转，遮盖函数

function drawGrp(grpId, grpCon, grpZG) {

var ctx = document.getElementById(grpId).getContext(grpCon);

ctx.translate(100,100);

ctx.rotate(15*Math.PI/180);

ctx.strokeRect(0, 0, 150, 100);

ctx.fillStyle = "palevioletred";

ctx.fillRect(0, 0, 150, 100);

ctx.globalCompositeOperation = grpZG;

ctx.beginPath();

ctx.arc(80,90,70,0,2*Math.PI,false);

ctx.closePath();

ctx.fillStyle = "mediumpurple";

ctx.fill();

}

// 作业二:2-2.原始状态

drawGrp("c-two", "2d");

// 作业二:3.五种样式

drawGrp("c-three", "2d", "destination-out");

drawGrp("c-four", "2d", "source-atop");

drawGrp("c-five", "2d", "destination-over");

drawGrp("c-six", "2d", "xor");

drawGrp("c-seven", "2d","source-out");

</script>

</body>

</html>


效果跟上边完全一致。

2016-06-01 22:13:10
...
头像
CrazyPotato
这个不错，基本知识点都掌握了，而且函数的使用很灵活了。
2016-06-02 19:49:24
...
没有更多了