【JS】js学习笔记之canvas基本绘图
2017-12-14 14:38
477 查看
准备工作:
①首先得在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>效果:
相关文章推荐
- day02_js学习笔记_01_js的简介、js的基本语法
- js高程第三章基本概念学习笔记
- 【js学习笔记-113】------<canvas>绘制和填充曲线
- 基础学习笔记之opencv(13):基本绘图
- 【js学习笔记-111】-----<canvas>图形属性
- js学习笔记:基本包装类型——Boolean
- 【逐梦旅程Windows游戏编程学习笔记 ①】基本GDI绘图
- js学习笔记:基本类型和引用类型
- JavaScript学习笔记(一) js基本语法
- JavaScript学习笔记(一) js基本语法
- 【js学习笔记-114】----<canvas>矩形、颜色、透明度、渐变及图案
- 韩顺平 javascript教学视频_学习笔记1_js课程介绍_js基本介绍
- OpenCv学习笔记(七)---OpenCv中的基本绘图函数,圆,椭圆,线段,矩形,多边形的绘制(1)
- opencv学习笔记——数据结构与基本绘图
- 【OpenCV学习笔记】七、基本绘图函数
- Android绘图,Canvas学习笔记
- HTML5 Canvas KineticJS 学习笔记1
- js学习笔记:基本包装类型——String
- 韩顺平_轻松搞定网页设计(html+css+javascript)_第20讲_js基本数据类型_js运算符1_学习笔记_源代码图解_PPT文档整理
- js高级程序设计学习笔记——基本概念