【JS】js学习笔记之canvas基本绘图

最新推荐文章于 2024-03-30 18:57:37 发布

阿来小同学

最新推荐文章于 2024-03-30 18:57:37 发布

阅读量346

点赞数

分类专栏： javascript 文章标签： canvas js javascript html 动画

本文链接：https://blog.csdn.net/skybboy/article/details/78802439

版权

javascript 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

准备工作：

①首先得在html加一个canvas标签，如：<canvas id="preview_canvas" width="600px" height="370px">

②在js中得到画布canvas：

var canvas = document.getElementById('preview_canvas');
var ctx = canvas.getContext('2d');

1.绘制三角形：

	ctx.beginPath();
	ctx.moveTo(135,135);
	ctx.lineTo(150,150);
	ctx.lineTo(135,165);
	ctx.fill();

2.添加颜色:

	ctx.strokeStyle = "orange"; //设置图形的填充颜色。
	ctx.fillStyle = "orange";//设置图形轮廓的颜色。

3.动画小例子：来源：https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
	<canvas id="canvas" width="500px" height="500px"></canvas>
    <canvas id="canvas1" width="500px" height="500px"></canvas>
</body>
<script>
	var sun = new Image();
	var moon = new Image();
	var earth = new Image();
	function init(){
	  sun.src = 'https://mdn.mozillademos.org/files/1456/Canvas_sun.png';
	  moon.src = 'https://mdn.mozillademos.org/files/1443/Canvas_moon.png';
	  earth.src = 'https://mdn.mozillademos.org/files/1429/Canvas_earth.png';
	  window.requestAnimationFrame(draw);
	}
	
	function draw() {
	  var ctx = document.getElementById('canvas').getContext('2d');
	
	  ctx.globalCompositeOperation = 'destination-over';
	  ctx.clearRect(0,0,300,300); // clear canvas
	
	  ctx.fillStyle = 'rgba(0,0,0,0.4)';
	  ctx.strokeStyle = 'rgba(0,153,255,0.4)';
	  ctx.save();
	  ctx.translate(150,150);
	
	  // Earth
	  var time = new Date();
	  ctx.rotate( ((2*Math.PI)/60)*time.getSeconds() + ((2*Math.PI)/60000)*time.getMilliseconds() );
	  ctx.translate(105,0);
	  ctx.fillRect(0,-12,50,24); // Shadow
	  ctx.drawImage(earth,-12,-12);
	
	  // Moon
	  ctx.save();
	  ctx.rotate( ((2*Math.PI)/6)*time.getSeconds() + ((2*Math.PI)/6000)*time.getMilliseconds() );
	  ctx.translate(0,28.5);
	  ctx.drawImage(moon,-3.5,-3.5);
	  ctx.restore();
	
	  ctx.restore();
	  
	  ctx.beginPath();
	  ctx.arc(150,150,105,0,Math.PI*2,false); // Earth orbit
	  ctx.stroke();
	 
	  ctx.drawImage(sun,0,0,300,300);
	
	  window.requestAnimationFrame(draw);
	}
	
	init();


function clock(){
  var now = new Date();
  var ctx = document.getElementById('canvas1').getContext('2d');
  ctx.save();
  ctx.clearRect(0,0,150,150);
  ctx.translate(75,75);
  ctx.scale(0.4,0.4);
  ctx.rotate(-Math.PI/2);
  ctx.strokeStyle = "black";
  ctx.fillStyle = "white";
  ctx.lineWidth = 8;
  ctx.lineCap = "round";

  // Hour marks
  ctx.save();
  for (var i=0;i<12;i++){
    ctx.beginPath();
    ctx.rotate(Math.PI/6);
    ctx.moveTo(100,0);
    ctx.lineTo(120,0);
    ctx.stroke();
  }
  ctx.restore();

  // Minute marks
  ctx.save();
  ctx.lineWidth = 5;
  for (i=0;i<60;i++){
    if (i%5!=0) {
      ctx.beginPath();
      ctx.moveTo(117,0);
      ctx.lineTo(120,0);
      ctx.stroke();
    }
    ctx.rotate(Math.PI/30);
  }
  ctx.restore();
 
  var sec = now.getSeconds();
  var min = now.getMinutes();
  var hr  = now.getHours();
  hr = hr>=12 ? hr-12 : hr;

  ctx.fillStyle = "black";

  // write Hours
  ctx.save();
  ctx.rotate( hr*(Math.PI/6) + (Math.PI/360)*min + (Math.PI/21600)*sec )
  ctx.lineWidth = 14;
  ctx.beginPath();
  ctx.moveTo(-20,0);
  ctx.lineTo(80,0);
  ctx.stroke();
  ctx.restore();

  // write Minutes
  ctx.save();
  ctx.rotate( (Math.PI/30)*min + (Math.PI/1800)*sec )
  ctx.lineWidth = 10;
  ctx.beginPath();
  ctx.moveTo(-28,0);
  ctx.lineTo(112,0);
  ctx.stroke();
  ctx.restore();
 
  // Write seconds
  ctx.save();
  ctx.rotate(sec * Math.PI/30);
  ctx.strokeStyle = "#D40000";
  ctx.fillStyle = "#D40000";
  ctx.lineWidth = 6;
  ctx.beginPath();
  ctx.moveTo(-30,0);
  ctx.lineTo(83,0);
  ctx.stroke();
  ctx.beginPath();
  ctx.arc(0,0,10,0,Math.PI*2,true);
  ctx.fill();
  ctx.beginPath();
  ctx.arc(95,0,10,0,Math.PI*2,true);
  ctx.stroke();
  ctx.fillStyle = "rgba(0,0,0,0)";
  ctx.arc(0,0,3,0,Math.PI*2,true);
  ctx.fill();
  ctx.restore();

  ctx.beginPath();
  ctx.lineWidth = 14;
  ctx.strokeStyle = '#325FA2';
  ctx.arc(0,0,142,0,Math.PI*2,true);
  ctx.stroke();

  ctx.restore();

  window.requestAnimationFrame(clock);
}

window.requestAnimationFrame(clock);
</script>
</html>

效果：

阿来小同学

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
【JS】js学习笔记之canvas基本绘图

ctx.beginPath(); ctx.moveTo(135,135); ctx.lineTo(150,150); ctx.lineTo(135,165); ctx.fill();准备工作：①首先得在html加一个canvas标签，如：②在js中得到画布canvas：var canvas = document.getElementById('preview_canvas'
复制链接

扫一扫