2016.04.19【H5移动...

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

发布于：2016-04-19 22:47

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

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

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

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

备注：作业二要求贴图。

吉林王族 2016-04-20 09:55

<style>

body{ padding-top:20px;}

canvas{ float:left;}

</style>

</head>

<body>

</body>

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>

陆文姣 2016-04-20 19:11

好厉害

大坏蛋 2016-04-22 18:33

<!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-23 11:49

css里的height,width是废话，去掉它，这个貌似不能编辑的

大坏蛋回复大坏蛋 2016-04-24 01:08

经检验，css无法对canvas进行长宽设置

大坏蛋回复大坏蛋 2016-06-01 22:03

以下是改良版

大坏蛋回复大坏蛋 2016-06-01 22:06

大坏蛋回复大坏蛋 2016-06-01 22:07

啥情况，那么改良版见另一个回复贴。

大坏蛋 2016-04-22 18:34

h6896 2016-04-25 00:34

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);

}

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

CrazyPotato 回复 h6896 2016-06-02 19:47

族族的怎么会报错，是不是你代码地方放错了？

h6896 回复 h6896 2016-06-03 18:35

犯了个低级的错误，js写在head里面的，后面没调用

大坏蛋 2016-06-01 22:13

<!DOCTYPE html>

<html>

<head>

<title>2016.4.19 JavaScript练习</title>

canvas {

margin: 5px;

}

</style>

</head>

<body>

<p>

</p>

<p>

</p>

<p>

</p>

// 作业二: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>

效果跟上边完全一致。

CrazyPotato 回复大坏蛋 2016-06-02 19:49

这个不错，基本知识点都掌握了，而且函数的使用很灵活了。

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

图片

视频

CrazyPotato

今日新帖

昨日新帖

帖子总数

CG绘画

视觉设计

影视后期

职业技能

AIGC

设计创作

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

CrazyPotato

CG绘画

视觉设计

影视后期

职业技能

AIGC

设计创作

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

CrazyPotato

72节H5交互动画精品课程，免费学习！