整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          HTML使用Canvas繪制動畫時鐘

          么是Canvas

          <canvas> 是HTML中的一個元素,它可被用來通過 JavaScript(Canvas API 或 WebGL API)繪制圖形及圖形動畫。

          Canvas API 提供了一個通過 JavaScriptHTML<canvas> 元素來繪制圖形的方式。它可以用于動畫、游戲畫面、數據可視化、圖片編輯以及實時視頻處理等方面。

          <canvas>標簽本身沒有繪圖能力,它僅僅是圖形的容器。在HTML,一般通過Javascript語言來完成實際的操作。

          創建HTML頁面并添加繪圖容器

          本文通過Javascript操作Canvas制作一個簡單的顯示當前時間的動畫時鐘,了解和學習簡單的canvas用法,僅以拋磚引玉。

          首先創建一個HTML文件,為了方便管理,使用一個div標簽包裹兩個canvas標簽,并加上一些簡單的css樣式。

          <!doctype html>
          <html lang="zh-cn">
          <head><title>Canvas繪制動畫時鐘</title>
          <style>
          html,body{margin:0;padding:0}
          #clockWrap {
          	position: relative;
          }
          canvas {
          	position: absolute;
          }
          #clock-ui {
          	z-index: 2;
          }
          #clock-plate {
          	z-index: 1;
          }
          </style>
          </head>
          <body>
            <div id="clockWrap">
            <canvas id="clock-plate"></canvas>
            <canvas id="clock-ui"></canvas>
          </div>
          <script></script>
          </body></html>

          本示例中使用了兩個canvas標簽(為什么使用兩個,一個不是更簡單嗎?),一個用于繪制鐘面,一個根據當前時間實時顯示和更新時針、分針和秒針的動態指向。好了,話不多說,開干。

          繪制鐘面刻度

          一個簡單的時鐘,可以分為鐘面上的刻度和指針。其中刻度和12個數字是固定的,我們可以將它們繪制在當作背景的canvas上(示例中id為clock-plate的canvas)。

          (1)要使用canvas,首先必須通過容器獲取渲染上下文:

          var $=function(id){return document.querySelector(id);}//這個函數只是為了方便獲取dom元素
          const canvasbg=$("#clock-plate"),
                canvas=$("#clock-ui"),
                ctx = canvasbg.getContext("2d"),//背景容器上下文
                ctxUI = canvas.getContext("2d");//指針容器上下文,后面代碼要用
          //定義畫布寬度和高度,時鐘圓直徑,并設置畫布大小
          const oW=1000,oH=800,cW=400,r=cW/2,oX=oW/2,oY=oH/2;
          canvas.width=oW;
          canvas.height=oH;
          canvasbg.width=oW;
          canvasbg.height=oH;

          (2)畫鐘的邊框,為了好看,這里畫兩個圈:

           //畫出時鐘外圓框
            ctx.lineWidth = 12;
          	ctx.beginPath();
          	ctx.arc(oX, oY, r+14, 0, 2 * Math.PI);
          	ctx.stroke();
          	ctx.closePath();
          	ctx.lineWidth = 8;
          	//畫出時鐘內圓框(刻度圈)
          	ctx.beginPath();
          	ctx.arc(oX, oY, r, 0, 2 * Math.PI);
          	ctx.stroke();
          	ctx.closePath();
          	ctx.beginPath();

          邊框效果圖

          (3)繪制刻度線和數字,可以利用三角函數計算出每個刻度的坐標:

          利用三角函數計算刻度線的坐標位置

          鐘面上有12個大格,從正上方12開始,它們的度數分別是270,300,330,0,30,60,90,120,150,180,210,240。然后利用JS的Math.sin和Math.cos分別計算出各大格的坐標。注意:js中Math.sin()和Math.cos()的參數不是角度數弧度。可以使用Math.PI/180*角度來轉化,比如將30度轉換成弧度=Math.PI/180*30

          //繪制鐘表中心點
          	ctx.beginPath();
          	ctx.arc(oX, oY, 8, 0, 2 * Math.PI);//圓心
          	ctx.fill();
          	ctx.closePath();
          	//設置刻度線粗細度
          	ctx.lineWidth = 3;
          	//設置鐘面12個數字的字體、大小和對齊方式
          	ctx.font = "30px serif";
          	ctx.textAlign="center";
          	ctx.textBaseline="middle";
          	var kdx,kdy;
          	//繪制12個大刻度和12個數字
          	//為方便計算,先定義了0-11這12個刻度對應的度數,也可以直接定義對應的弧度。
          	const hd=Math.PI/180,degr=[270,300,330,0,30,60,90,120,150,180,210,240];
          	for(var i=0;i<12;i++){
          		kdx=oX+Math.cos(hd*degr[i])*(r-3);
          		kdy=oY+Math.sin(hd*degr[i])*(r-3);
          		ctx.beginPath();
          		ctx.arc(kdx, kdy, 6, 0, 2 * Math.PI);//畫圓形大刻度
          		ctx.fill();
              //繪制刻度對應的數字
          		ctx.strokeText(i==0? 12 : i,oX+Math.cos(hd*degr[i])*(r-24),oY+Math.sin(hd*degr[i])*(r-24));
          		ctx.closePath();
          	}
          	
          	//繪制小刻度
          	ctx.lineWidth = 2;
          	for(var i=0;i<60;i++){
          		if(i % 5 == 0) continue;//跳過與刻度重疊的刻度
          		x0=Math.cos(hd*i*6);
          		y0=Math.sin(hd*i*6);
          		ctx.beginPath();
          		ctx.moveTo(oX+x0*(r-10), oY+y0*(r-10)); 
          		ctx.lineTo(oX+x0*r, oY+y0*r); //畫短刻度線
          		ctx.stroke(); 
          		ctx.closePath();
          	}

          效果如圖:

          鐘面效果圖

          (4)根據當前時間繪制指針

          習慣上,時針粗短,分針略粗而長,秒針細長。為加大區別,示例中秒針細長并且繪制成紅色。

          function drawHp(i){//繪制時針
          	const x0=Math.cos(hd*i*30),y0=Math.sin(hd*i*30);
          	drawPointer(oX,oY,oX+x0*(r-90),oY+y0*(r-90),10,"#000000");
          }
          function drawMp(i){//繪制分針
          	const x0=Math.cos(hd*i*6),y0=Math.sin(hd*i*6);
          	drawPointer(oX,oY,oX+x0*(r-60),oY+y0*(r-60),5,"#000000");
          }
          function drawSp(i){//繪制秒針
          	const x0=Math.cos(hd*i*6),y0=Math.sin(hd*i*6);
          	drawPointer(oX,oY,oX+x0*(r-20),oY+y0*(r-20),2,"#FF0000");
          }
          //抽取出繪制三種指針時共同的部分,注意指針繪制在渲染上下文ctxUI中
          function drawPointer(ox,oy,tx,ty,width,color){
          	ctxUI.strokeStyle = color;
          	ctxUI.lineCap = "round";
          	ctxUI.lineWidth = width;
          	ctxUI.beginPath();
          	ctxUI.moveTo(ox, oy);
          	ctxUI.lineTo(tx,ty);
          	ctxUI.stroke();
          	ctxUI.closePath();
          }

          現在已經有了繪制三種指針的方法,參數是當前時間的時、分和秒,將根據它們的值確定指針的坐標。不過,因為使用的是默認的convas坐標體系,0值實際指向3的位置,需要小小的修正一下。

          window.requestAnimationFrame(function fn(){
          		var d = new Date();
          		ctxUI.clearRect(0,0,oW,oH);
          		//度數從0開始,而0在3刻度(15分/秒位置),修正為全值減15,如果小于0則修正回來
              var hour=d.getHours(),minute=d.getMinutes()-15,second=d.getSeconds()-15;
          		hour=hour>11? hour-15 : hour-3;
          		drawHp(hour>=0? hour : 12+hour);
          		drawMp(minute>=0? minute : 60+minute);
          		drawSp(second>=0? second : 60+second);
          		window.requestAnimationFrame(fn);
          });

          接下來,調用window.requestAnimationFrame,在其中繪制并更新指標的位置。看看效果如何:

          指針繪制情況與實際時間相符

          貌似效果有了,截圖時電腦上的時間是10時17分,指針繪制上,時針指向10時,分針指向17。嗯,感覺有點別扭?對了,時針和分針怎么是端端正正地指向它們的整時整分刻度上呢?實際鐘表上時針和分針是展示動態進度的,此時時針應該越過10時的位置才對。沒關系,我們在繪制時針和分針時別點東西,讓它的角度值加上分針和秒針的值試試。

          //修改后的繪制三種指針的方法
          function drawHp(i,f,m){//繪制時針,參數:時,分,秒
          	const x0=Math.cos(hd*(i+(f/60)+(m/600))*30),y0=Math.sin(hd*(i+(f/60)+(m/600))*30);
          	drawPointer(oX,oY,oX+x0*(r-90),oY+y0*(r-90),10,"#000000");
          }
          function drawMp(i,f){//繪制分針,參數,分,秒
          	const x0=Math.cos(hd*(i+(f/60))*6),y0=Math.sin(hd*(i+(f/60))*6);
          	drawPointer(oX,oY,oX+x0*(r-60),oY+y0*(r-60),5,"#000000");
          }
          function drawSp(i){//繪制秒針
          	const x0=Math.cos(hd*i*6),y0=Math.sin(hd*i*6);
          	drawPointer(oX,oY,oX+x0*(r-20),oY+y0*(r-20),2,"#FF0000");
          }

          再來看看效果,嗯,立竿見影呀:

          指針指向更合理了

          到此為止,canvas繪制一個簡易時鐘就完成了。下面繼續優化一下。剛才使用requestAnimationFrame方法即時更新繪制情況。這個方法與刷新率有關,看看mdn上面怎么說的:

          window.requestAnimationFrame() 方法會告訴瀏覽器你希望執行一個動畫。它要求瀏覽器在下一次重繪之前,調用用戶提供的回調函數。

          對回調函數的調用頻率通常與顯示器的刷新率相匹配。雖然 75hz、120hz 和 144hz 也被廣泛使用,但是最常見的刷新率還是 60hz(每秒 60 個周期/幀)。為了提高性能和電池壽命,大多數瀏覽器都會暫停在后臺選項卡或者隱藏的 <iframe> 中運行的 requestAnimationFrame()。

          本示例中,更新指針的位置并不需要很高的刷新頻率,可以通過節流進行一下優化:

          var fps = 5, fpsInterval = 1000 / fps,lastTime = new Date().getTime(); //記錄上次執行的時間
          function runStep() {
              requestAnimationFrame(runStep);
              var d=new Date(),now = d.getTime()
              var elapsed = now - lastTime;
              if (elapsed > fpsInterval) {
          				ctxUI.clearRect(0,0,oW,oH);
                  lastTime = now - (elapsed % fpsInterval); 
          			//度數從0開始,而0在3刻度(15分/秒位置),修正為全值-15,如果小于0則用60減回
                  var hour=d.getHours(),minute=d.getMinutes()-15,second=d.getSeconds()-15;//console.log(d.getSeconds(),second);
                  hour=hour>11? hour-15 : hour-3;
                  drawHp(hour>=0? hour : 12+hour,minute+15,second+15);
                  drawMp(minute>=0? minute : 60+minute,second+15);
                  drawSp(second>=0? second : 60+second);
              }
          }
          runStep();

          當然,實現時鐘的方法是很多,比如可以使用畫布的旋轉(rotate方法)來實現指針的動態轉動等等。

          完整HTML+JS源碼:

          .less

          * {
              margin: 0;
              padding: 0;
              &:hover #wrap {
                  background: skyblue;
                  color: beige;
              }
              #wrap {
                  //absolute: 元素從塊級元素-》轉化為定位元素,可以自定義高寬(一旦浮動,則為浮動元素)
                  position: absolute;
                  width: 500px;
                  height: 500px;
                  background: salmon;
                  border: 1px solid;
                  border-radius: 50%;
                  //居中
                  top: 50%;
                  left: 50%;
                  transform: translate(-50%, -50%);
                  /**
                                      這里的-50% =》 margin-left: -250px margin-top: -250px
                   */
                  transition: 2s;
                  //陰影:box-shadow:x-px , y-px ,模糊程度?px #color 
                  box-shadow: 2px 2px 5px #4682B4;
                  //卡尺
                  ul {
                      //消默認li樣式
                      list-style: none;
                      li {
                          position: absolute;
                          width: 6px;
                          height: 30px;
                          background: beige;
                          //總寬度=500px,width=6px,left=247
                          left: 247px;
                          top: 0;
                          //更新基點
                          transform-origin: center 250px;
                          //分鐘height:每5幀+1,5n+1,原生css變量n
                          &:nth-child(5n+1) {
                              height: 40px;
                          }
                      }
                  }
                  //rgb(255,255,255) 透明opacity--》rgba(255,255,255,0)
                  .logo {
                      position: absolute;
                      width: 500px;
                      height: 500px;
                      font: 50px/500px "微軟雅黑";
                      text-align: center;
                      top: 15%;
                  }
                  //時針
                  .hour {
                      position: absolute;
                      //位置left=500-10=490/2=245
                      left: 245px;
                      //關聯height=(500-100)/2=200
                      top: 90px;
                      width: 10px;
                      height: 160px;
                      background: steelblue;
                      border: 1px solid white;
                      transform-origin: center bottom;
                  }
                  //分針
                  .minute {
                      position: absolute;
                      //位置left=(500-8)/2=246
                      left: 246px;
                      //關聯height=(500-200)/2=150
                      top: 70px;
                      width: 8px;
                      height: 180px;
                      background: yellowgreen;
                      border: 1px solid white;
                      transform-origin: center bottom;
                  }
                  //秒針
                  .second {
                      position: absolute;
                      //位置left=(500-6)/2=247
                      left: 247px;
                      //關聯height=(500-200)/2=150
                      top: 80px;
                      width: 6px;
                      height: 200px;
                      background: red;
                      border: 1px solid;
                      box-shadow: 1px 1px 5px #000000;
                      //transform-origin: center bottom;
                      //height距離圓心30px,需要減去
                      transform-origin: center 170px;
                  }
                  //鐘座
                  .center-top {
                      position: absolute;
                      //位置left=(500-50)/2=225
                      left: 225px;
                      //關聯height=(500-50)/2=225
                      top: 225px;
                      width: 50px;
                      height: 50px;
                      border-radius: 50%;
                      background: salmon;
                      //降級div
                      z-index: -1;
                  }
                  .center-top2 {
                      position: absolute;
                      //位置:(500-30-2*2)/2=233
                      left: 233px;
                      top: 233px;
                      width: 30px;
                      height: 30px;
                      border: 2px solid white;
                      border-radius: 50%;
                      background: beige;
                  }
              }
          }
          123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123

          2.css

          * {
            margin: 0;
            padding: 0;
          }
          *:hover #wrap {
            background: skyblue;
            color: beige;
          }
          * #wrap {
            position: absolute;
            width: 500px;
            height: 500px;
            background: salmon;
            border: 1px solid;
            border-radius: 50%;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            /**
                                      這里的-50% =》 margin-left: -250px margin-top: -250px
                   */
            transition: 2s;
            box-shadow: 2px 2px 5px #4682B4;
          }
          * #wrap ul {
            list-style: none;
          }
          * #wrap ul li {
            position: absolute;
            width: 6px;
            height: 30px;
            background: beige;
            left: 247px;
            top: 0;
            transform-origin: center 250px;
          }
          * #wrap ul li:nth-child(5n+1) {
            height: 40px;
          }
          * #wrap .logo {
            position: absolute;
            width: 500px;
            height: 500px;
            font: 50px/500px "微軟雅黑";
            text-align: center;
            top: 15%;
          }
          * #wrap .hour {
            position: absolute;
            left: 245px;
            top: 90px;
            width: 10px;
            height: 160px;
            background: steelblue;
            border: 1px solid white;
            transform-origin: center bottom;
          }
          * #wrap .minute {
            position: absolute;
            left: 246px;
            top: 70px;
            width: 8px;
            height: 180px;
            background: yellowgreen;
            border: 1px solid white;
            transform-origin: center bottom;
          }
          * #wrap .second {
            position: absolute;
            left: 247px;
            top: 80px;
            width: 6px;
            height: 200px;
            background: red;
            border: 1px solid;
            box-shadow: 1px 1px 5px #000000;
            transform-origin: center 170px;
          }
          * #wrap .center-top {
            position: absolute;
            left: 225px;
            top: 225px;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: salmon;
            z-index: -1;
          }
          * #wrap .center-top2 {
            position: absolute;
            left: 233px;
            top: 233px;
            width: 30px;
            height: 30px;
            border: 2px solid white;
            border-radius: 50%;
            background: beige;
          }

          3.js

          window.onload=function(){
          	var ulNode=document.querySelector("#wrap > ul");
          	var liNode="";
          	//創建元素-style樣式css
          	var liStyleNode=document.createElement("style");
          	var liCss="";
          	/**
          	 * 循環添加li標簽
          	 * ul > li :nth-child(i+1){
          	 * 	transform: rotate((i*6)deg);
          	 * }
          	 */
          	for(var i=0;i<60;i++){
          		liNode+="<li></li>";
          		//指定li標簽樣式css
          		liCss+="ul > li:nth-child("
          		+(i+1)
          		+"){transform:rotate("+(i*6)+"deg);}";
          	}
          	ulNode.innerHTML=liNode;
          	liStyleNode.innerHTML+=liCss;
          	//加入到document
          	document.head.appendChild(liStyleNode);
          	
          	var hourNode=document.querySelector("#wrap > .hour");
          	var minuteNode=document.querySelector("#wrap > .minute");
          	var secondNode=document.querySelector("#wrap > .second");
          	
          	//計時器啟動前,move執行時間變換
          	move();
          	//second-轉動
          	setInterval(move,1000);
          	function move(){
          		//獲取內置date
          		var date=new Date();
          		//注意時間計算順序,優先計算秒
          		var second=date.getSeconds();
          		var minute=date.getMinutes()+second/60;
          		var hour=date.getHours()+minute/60;
          		
          		//秒:360/60=6
          		secondNode.style.transform="rotate("+(6*second)+"deg)";
          		//分鐘:360/60=6
          		minuteNode.style.transform="rotate("+(6*minute)+"deg)";
          		//小時:360/12=30
          		hourNode.style.transform="rotate("+(30*hour)+"deg)";
          	}
          }
          

          4.html

          <!DOCTYPE html>
          <html>
          
          	<head>
          		<meta charset="UTF-8">
          		<title>時鐘表clock</title>
          	</head>
          
          	<body>
          		<div id="wrap">
          			<div class="logo">cevent</div>
          			<ul>
          				<!--啟用js腳本-->
          				<!--<li></li>-->
          			</ul>
          			<div class="hour"></div>
          			<div class="minute"></div>
          			<div class="second"></div>
          			<div class="center-top"></div>
          			<div class="center-top2"></div>
          		</div>
          
          	</body>
          	<link rel="stylesheet" href="css/less025-clock-module.css" />
          	<script type="text/javascript" src="js/less025-clock-module.js"></script>
          
          </html>
          123456789101112131415161718192021222324252627

          5.效果圖

          018版創意寒假作業清單(小學到高中最全方案)| 頭條

          2018-01-14 星寶 新校長傳媒

          寒假在即,你設計好假期作業了嗎?

          現在老師們對于作業越來越追求趣味化、多樣化、個性化,并誕生了超多精彩的創意。

          今天,我們準備了一份小學到高中的各學科作業清單,你可以挑選從中合適的內容,或者由此觸發靈感,找到更多創意維度。希望這個寒假,孩子們可以邊玩邊成長。

          小學篇

          語文

          1. 每天堅持為家人朗讀10鐘文章或者詩詞等。

          2. 參考老師提供的書單,也可以自己挑選課外書進行閱讀,并作閱讀記錄。開學后請推薦一本喜歡的書。

          3. 采訪5名不同的人,記錄整理他們的新年愿望,簡要寫出自己的采訪感受。

          4. 每日一拍,配以文字,記錄寒假生活。

          5. 與親人一起觀看春晚,嘗試對節目進行評價。

          6. 原創3條新年祝福短信,搜集不少于10副春聯,并為家里手寫一副春聯。

          7. 當一次小老師,召集不少于三個同伴,嘗試上一節語文課,用照片和視頻記錄過程。

          8. 收集假期發現的廣告牌、電視、雜志、報紙、期刊等上面的錯別字,指出錯在哪里,正確的字該怎么寫,并記錄。

          9. 嘗試向喜歡的雜志投一次稿。

          10. 用圖文并茂的辦法,以時間為序,編寫家庭二十年編年史。每年記錄一兩件最值得紀念的大事。一句話,一段話均可。

          11. 研究“年”“錢”“福”字的起源和演變。

          數學

          1. 設計一份2018年臺歷。

          2. 和家人羅列年貨清單,購買年貨,計算開支,高年級嘗試把數據做成合適的統計圖。

          3. 記錄每一筆壓歲錢的來源及金額,制作一個壓歲錢使用方案。

          4. 發現生活中的對稱現象,拍照記錄,并查找其對應的對稱類別。

          5. 和伙伴玩拍球游戲,根據游戲,設計一道乘法題和一道除法題并解答。

          6. 用身邊的物品,根據自己的想象做一個3D圖形。

          7. 用尺子測量房間物體的長度,并記錄。

          8. 閱讀一本你喜歡的數學讀本,開學分享你的收獲。

          9. 認識七巧板里的圖形,并拼組自己喜歡的圖案,把它們畫在紙上,涂上好看的顏色。

          10. 找一找生活中的“植樹問題”,并嘗試講解。

          英語

          1. 設計個性字母卡。

          2. 用英文制作自己的家庭介紹海報以及新年賀卡。

          3. 下載“英語趣配音”APP,上傳自己的英語配音作品。

          4. 學唱一首“陽光、向上”的英文歌曲。

          5. 用英語和畫筆,將寒假去過的地方或讀過的書展示出來。

          6. 制作專屬單詞本(至少有3頁,每頁5個單詞以上),從而了解英語字典的結構,理解所學詞匯的含義。

          7. 制作“Happy New Year”為主題的英語小報。

          科學

          1. 制作一份天氣日歷,記錄寒假每天的天氣情況。

          2. 制作一個土電話,與家人、伙伴用土電話進行通話。(材料:紙杯、棉線、火柴)

          3. 嘗試做一做本學期做過的實驗(至少兩個),并做記錄。

          4. 親手萌發一份綠豆芽,完成實驗報告,并為父母炒一份豆芽菜,感謝他們辛勞的付出,記得拍照留念。

          5. 發現身邊的科學問題,進行收集整理,并試著解答。(5到10個)

          6. 統計家里一天的垃圾情況,包括類別、重量、是否可回收等。

          7. 把自己擅長而別人可能不了解的科學知識用小視頻記錄下來。

          體育

          1. 向長輩學一個他們小時候玩過的傳統游戲,開學介紹給同學們,一起玩一玩。

          2. 了解一個冬奧項目,認識我國在該項目上的知名運動員。

          3. 選擇自己最需要或最喜歡的運動項目,至少進行5次大運動項目鍛煉。

          音樂、美術

          1. 演唱一首美好的歌曲祝福新年,拍成視頻,曬在家校溝通群內。

          2. 生肖是中華傳統文化的一部分,以自己喜歡的藝術形式(繪畫、剪紙等)表現“狗”。

          3. 與父母合作,創意裝飾家庭小空間。

          4. 收集身邊的廢舊物品,發揮想象,做一件藝術品。

          5. 按照“年”和“冬”兩個主題,用巧手畫下自己的寒假生活。

          品德與生活

          1. 總結2017年10件讓自己引以為傲的事,并把它記錄下來。

          2. 學會一項家務技能和一項急救技能。

          3. 挑戰七天不上網,不玩手機。

          4. 前往家長單位,體驗“一日工作”。

          5. 留心長輩怎么做客、待客,問一問長輩像你這么大的時候是怎么過年的,通過比較,記錄你的體會、感悟。

          6. 在春節期間向長輩、老師、同學打一個電話或發一條短信互表新年祝福。

          7. 制作一張家庭樓層的消防逃生路線圖。

          8. 對春節浪費現象進行調查,并撰寫調查報告。

          9. 制訂一份新年成長計劃。

          10. 可以用一周時間與本班同學交換家庭,自愿結成“家庭留學生”小組,與對方父母共同生活,一起吃飯、學習、游玩。

          中學篇

          語文

          特別推薦溫州市第二外國語學校高一語文備課組設計的作業:

          溫州,這座溫暖的城市;江心嶼,這座溫暖的島嶼。自從一千多年前的一位“溫州市長”(永嘉太守)謝靈運登上江心嶼并賦詩后,歷代文人墨客紛至沓來,為她寫下了一千多首膾炙人口的詩篇,從而使她成為了天下無雙的“詩之島”。

          這些詩篇不僅溫暖了這座島嶼,也溫暖了這座城市,更溫暖了我們。今天,我們設計了以下這組有溫度的題目,希望可以溫暖你的這個寒假。

          1. 做一名游客

          與你的父母或朋友一起開啟一段親情或友情之旅,游覽江心嶼,并寫一篇游記,字數700字以上。

          【參考文章】

          祝勇:《感受西湖》

          http://www.yuwen888.com/Article/Class25/8363.html

          梁衡:《九華山悟佛》

          http://blog.sina.com.cn/s/blog_6a748c7101013mk6.html

          2. 做一名騷客

          熟讀并背誦歷代文人詠江心嶼的詩詞或對聯至少3首(副)。選擇其中一首或幾首寫一篇賞析文字,字數500字以上;也可以自己寫一首詠江心嶼的小詩,古體詩、現代詩不限,并解讀一下你的創作背景與意圖,300字以上。

          【參考詩聯】

          • 謝靈運《登江中孤嶼》

          • 孟浩然 《永嘉上浦館逢張八子容》

          • 張子容 泛永嘉江日暮回舟

          • 李白 《與周生》

          • 杜甫 《送裴虬尉永嘉》

          • 韓愈 《題謝公游孤嶼》

          • 陸游 《同永嘉守宿江心寺》

          • 王十朋 《駕幸江心次僧宗覺韻》

          • 徐照 《江心寺》

          • 文天祥 《北歸宿中川寺》

          • 王十朋 江心寺門聯

          • 弘一法師 江心寺聯......

          【參考文章】

          《謝靈運<登池上樓>鑒賞》

          http://www.exam58.com/gkscmj/4230.html

          《韓愈<左遷至藍關示侄孫湘>賞析》

          http://blog.sina.com.cn/s/blog_5d970a2e0100fe94.html

          3. 做一名拍客

          拍一張你自己滿意的江心嶼某景點的照片,并寫一篇攝影散文,講一講照片背后的故事。字數600字以上。

          【參考文章】

          曹文軒《前方》(教材必修一)或http://www.douban.com/group/topic/42050271/?type=like

          校刊《塔尖》拍客欄目文章。

          4. 做一名導游

          假如來自臺灣的周杰倫或來自香港的鄧紫棋到溫州開個唱,他(她)很想游覽江心嶼,邀你做導游。請設置一下游覽路線,并擬一篇導游詞,要求文中至少包含他(她)的三句歌詞。字數800字以上。

          【參考文章】

          《芙蓉村導游詞》

          http://blog.sina.com.cn/s/blog_67c710310101938z.html

          5. 做一名好市民

          據統計,2014年江心嶼景區虧損200多萬。因此,有人建議拆除一些古舊建筑,新增一些娛樂設施。假如溫州市市長征求市民對江心嶼的開發與保護的意見。你來寫一封致市長的信,談談你的意見與建議。字數600字以上。

          【參考文章】

          《給市長的一封信》

          http://www.tyfjddb.com/47335_geishichangdeyifengxin_zuowen_500/

          梁思成《關于北京城墻的存廢問題的討論》(教材必修四)或:

          http://www.douban.com/group/topic/13180524/?type=rec

          6. 做一名評論員

          鹿城區發改局召開聽證會,預計今年開始將江心嶼的門票價漲至30元或33元(2011年已由20元漲至25元)。同時,也有人建議應學習西湖景區對市民免費開放。作為一名游客,你對此有什么看法。寫一則評論,字數500字以上。請將寫好的文章發到gdshjzy6@126.com。

          【參考文章】

          東方網:《江心嶼運營現虧損想漲門票來維持生計 引發大交鋒》

          http://roll.eastday.com/dfw/c4/2014/1224/1054627177.html

          江山新聞網:《為江郎山門票不漲價叫好》

          http://jsnews.zjol.com.cn/jsxww/system/2011/01/27/013199709.shtml

          注意:以上六道題目只需做其中三道,題目二,必做;題目一和三,選做其一;題目四或五或六,選做其一。

          數學

          1. 春節流行微信搶紅包,請了解新年網絡紅包的各項數據,并分析背后的意義。

          2. 在出行高峰期任選一處紅綠燈,分別測出行人和機動車等待綠燈的時間,觀察、統計相應時間內行人數量和機動車數量。評估紅綠燈設置的合理性,并形成報告。如不合理,請以書面報告的形式向交警部門提出改進建議。

          3. 用學習過的幾何體和身邊的閑置物品,制作富有創造性的模型。

          4. 觀察生活中的立體實物,拍照并畫出三視圖。

          5. 畫出自家的房屋平面圖,并根據自己的觀察,為空間優化提出建議。

          6. 選一部具有數學元素的經典影片觀看,比如死亡密碼、美麗心靈、心靈捕手、費馬最后定理、笛卡兒。

          7. 搜集1~2位數學家的有關資料,將其簡介及主要事跡整理成1000字左右的文章。

          8. 用思維導圖梳理本學期知識框架。

          9. 購買一個魔方,打亂各面順序,利用立體幾何知識,恢復原樣。

          10. 自己設計一份和數學有關的創意作業。

          英語

          1. 根據學過的教材內容,選一個單元,嘗試編寫具有自己特色的英語主題式分級閱讀材料,形式自由。

          2. 觀看BBC《中國新年》三集紀錄片,用思維導圖簡介其中的某一集。

          3. 用四格(六格)漫畫反映你的一個春節故事,每幅畫面用英語句子對畫面進行描述。

          4. 搜集自己本學期的作文佳作,設計一本英語作文集。

          5. 組隊,完成一部英語微電影的配音。

          6. 用英語介紹自己的家人,并拍攝視頻。

          7. 嘗試翻譯一篇文章。

          8. 閱讀至少一本你喜歡的英語原著。

          9. 至少看一場英文原版電影。

          10. 選取自己喜愛的英文歌曲一首,以新年、夢想、希望等為主題,用英文譜寫歌詞,演唱錄制成小視頻,并將曲子及歌詞拍照。

          歷史

          1. 了解親戚之間的親緣關系,用喜歡的形式繪制出家譜;

          2. 觀看《國家寶藏》綜藝節目,為你最喜歡的國寶投票,并制作宣傳海報。

          3. 關于計劃經濟時代的“票證”調查。形式:采訪某位長輩,收集“票證”。

          4. 從老師推薦書目中任選一本閱讀,就書中的某一個或幾個自己感興趣的問題,談談自己的見解和看法。

          5. 觀看一部文史紀錄片,寫一篇觀后感。

          6. 觀看一部歷史題材的影視劇,找出其中的重要史實或者歷史謬誤。

          7. 利用周邊的歷史人文景點來一次深度行走,參觀當地歷史博物館、檔案館,學習地方史志編撰。

          地理

          1. 到火車站了解鐵路春運一天的客流量,隨機調查3位旅客:目的地、票價,結合鐵路干線圖分析該旅客可能依次經過的鐵路線名稱。

          2. 搜集中國南北方等地區的春節文化習俗,并分析說明與地理環境的關系。

          3. 收集2017年世界各地的五件有趣的地理新聞,做成電子小報。

          4. 繪制一幅以自己家所在地為中心的附近地區商業分布圖;歸納不同類型商業分布的特征。

          5. 利用假期外出觀察、拍攝有特色的地貌,形成圖文報告。在其中描述其特點并運用所學知識分析其成因。

          6. 選取你家附近道路的一長期堵點,觀察堵車的程度并分析造成堵車的原因,最好還能提出緩解該處堵車的措施,形成分析報告。

          政治

          1. 收集假期感興趣的時政新聞并分類整理,制作一張報紙。

          2. 挑選3個感興趣的時政新聞,書寫新聞標題,并盡可能從《經濟生活》《政治生活》《文化生活》《生活與哲學》多角度進行評論。

          3. 制作一份關于憲法的宣傳海報。

          4. 做一次關于自信與事業成功的調查分析,從而培養自己的自信心,克服自卑,做一個自信的人。

          5. 請父母協助拿少量的壓歲錢炒炒股,或者買基金、存銀行,體會不同理財方式的運作流程。

          6. 完成城市官網中的一項調查問卷,并從政府的角度思考為什么要設計這樣的問卷。

          物理

          1. 研究春節中的物理現象,比如放鞭炮,從點火到爆炸,里面有哪些物理現象?車輛過橋的時候橋會震動,包含了什么物理現象。

          2. 收集家里使用的用電器,統計出型號、電功率、含義。

          3. 制作一個物理小發明。制作方法可以上網查。

          4. 了解2017年國內外的與物理相關的重大項目,如航天、軍事、核電能源等,開學分享你最感興趣的一個項目。

          5. 在古代的詩詞中,往往蘊含著豐富的物理哲理,制作一個古詩物理薈萃,精妙的賞析配上唯美的插圖,定當妙趣橫生!

          化學

          1. 用你能想到的任何材料,制作一個你喜歡的分子等結構模型。

          2. 用化學知識解釋生活中的3個問題。

          3. 玩《化學加油站》闖關游戲。

          4. 調查家里的能源使用情況,給出優化建議。

          5. 寫一寫與化學相關的故事、老師、課堂等;或用化學知識改編一首歌詞或詩歌;或畫一幅與化學相關的圖畫等。

          6. 查閱資料做1-2個家庭小實驗或自己的創新實驗,并寫出實驗報告或錄成視頻。

          7. 了解一項化學工業生產流程,比如食品加工、玻璃工藝、飲料加工,酒的釀造,醋的釀造等等與化學有關的相關內容。

          生物

          1. 假期出游時,請至少認識10種你過去所不認識的生物,并和它合影;查查生物的信息,整理成圖文并貌的報告。

          2. 觀察或查閱資料,了解至少兩種生物的生殖特點(過程),寫出科普短文。

          3. 做一份春節前后的自然筆記。

          4. 結合所學知識,利用細胞呼吸原理,制作一瓶(壇)腐乳或泡菜,或將糯米(淀粉)發酵生成酒精,做成米酒。

          5. 舉辦一次茶會,至少泡兩款茶跟大家分享。

          6. 觀看《猩球崛起》《生化危機》《侏羅紀公園》《逃離克隆島》《第六日》《Body Story》中的一部,找出影片里涉及的相關生物技術、操作步驟以及在工業、醫學、科技等領域的應用。

          音樂

          1. 閱讀一本關于某位中外音樂家的生平傳記。

          2. 組隊用所學的音樂、物理等知識,嘗試制作一個小型樂器,能夠發出do、re、mi、fa、so、la、ti七個音階。

          3. 嘗試利用一些音樂APP,自編一首曲子。

          美術

          1. 嘗試為父母畫一幅像

          2. 為班級制作一份新學期海報

          3. 觀看世界首部油畫電影《致愛梵高·星空之謎》,開學分享你的觀感

          體育

          1. 每天看30分鐘左右體育新聞或體育節目或體育比賽,了解一件與體育有關的事件,簡單記錄下來。

          2. 選擇一項喜歡的體育運動,并堅持鍛煉15天以上。


          主站蜘蛛池模板: 怡红院AV一区二区三区| 视频一区二区中文字幕| 中文字幕一区二区三区在线不卡| 一区二区三区四区无限乱码| 视频一区二区中文字幕| 精品乱码一区内射人妻无码 | 一区二区高清视频在线观看| 亚洲一区二区三区免费| 亚洲一区中文字幕| 夜夜添无码一区二区三区| 交换国产精品视频一区| 国产波霸爆乳一区二区| 亚洲一区二区三区写真| 中文人妻无码一区二区三区 | 中日av乱码一区二区三区乱码| 色久综合网精品一区二区| 色视频综合无码一区二区三区| 日本伊人精品一区二区三区| 一区二区三区福利视频| 精品人妻一区二区三区四区在线| 麻豆亚洲av熟女国产一区二| 日韩精品无码一区二区视频| 一区二区三区在线观看中文字幕| 狠狠做深爱婷婷久久综合一区| 无码av免费一区二区三区试看 | 国产在线精品一区二区三区不卡 | 人妻在线无码一区二区三区| 久久精品黄AA片一区二区三区| 狠狠色婷婷久久一区二区| 午夜福利一区二区三区高清视频| 国产内射在线激情一区| 日本一区二区在线| 无码播放一区二区三区| 国产麻豆精品一区二区三区| 在线观看国产一区亚洲bd| 日韩在线观看一区二区三区| 国产女人乱人伦精品一区二区| 日韩精品一区二区三区影院 | 中文字幕在线观看一区二区三区| 狠狠做深爱婷婷综合一区 | 亚洲福利秒拍一区二区|