canvas基础学习

最新推荐文章于 2024-07-19 11:00:40 发布

恒之传说

最新推荐文章于 2024-07-19 11:00:40 发布

阅读量310

点赞数 1

分类专栏：前端:html5 文章标签： html5 canvas 图形 2d

本文链接：https://blog.csdn.net/u013777676/article/details/59188940

版权

前端:html5 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

1.Canvas元素
canvas 元素用于在网页上绘制图形。HTML5 的 canvas 元素使用 JavaScript 在网页上绘制2D图像。
在矩形区域的画布上，控制其每一像素，JavaScript 来绘制 2D图形，逐像素进行渲染。可以通过多种方法使用canvas 元素绘制路径、矩形、圆形、字符以及添加图像。
2.创建canvas

<canvas id="myCanvas" width="300" height="300"></canvas>

3.绘制

canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
</head>
<style type="text/css">
.myCanvas{border:1px solid #d3d3d3;}
</style>
<body>
<canvas id="myCanvas" class="myCanvas" width="300" height="150"></canvas>
</body>
</html>

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.rect(20,20,150,100);
ctx.stroke();
</script>

4.使用canvas制作时钟案例

canvasAPI地址：点击打开链接

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="utf-8">  
<title>canvas clock</title>  
</head>  
<style type="text/css">  
div{
     text-align: center;
     margin-top: 250px;
}
#clock{border:1px solid #d3d3d3;}
</style>  
<body> 
     <div>
        <canvas id="clock" width="200" height="200"></canvas>    
     </div>
</body>  
</html>  
  
<script type="text/javascript">  

var c=document.getElementById("clock");  
var ctx=c.getContext("2d");
var width=ctx.canvas.width;
var height=ctx.canvas.height;
var r=width / 2;
//背景  
function drawBackGround(){
    //保存当前状态
    ctx.save();
    ctx.translate(r,r);
    ctx.beginPath();
    ctx.lineWidth=10;
    ctx.arc(0, 0, r-5, 0, 2 * Math.PI, false);
    ctx.stroke();
    var hourNumbers = [3,4,5,6,7,8,9,10,11,12,1,2];
    ctx.font='18px Arial';
    ctx.textAlign='center';
    ctx.textBaseline = 'middle';
    hourNumbers.forEach(function(number,i){
        var rad = 2 * Math.PI / 12 * i;
        var x = Math.cos(rad) * (r - 30);
        var y = Math.sin(rad) * (r - 30);
        ctx.fillText(number, x, y);
    })
    for(var i=0; i<60; i++){
      var rad = 2 * Math.PI / 60 * i;
      var x = Math.cos(rad) * (r - 18);
      var y = Math.sin(rad) * (r - 18);
      ctx.beginPath();
      if(i%5==0){
          ctx.fillStyle="#000"
          ctx.arc(x,y,2,0,2 * Math.PI, false);
      }else{
          ctx.fillStyle="#eee"
          ctx.arc(x,y,2,0,2 * Math.PI, false);
      }
      ctx.fill();
    }
}
//时针
function drawHour(hour,minute){
     //保存当前状态
     ctx.save();
     ctx.beginPath();
     var rad = 2 * Math.PI / 12 * hour;
     var mrad = 2 * Math.PI / 12 / 60 * minute;
     ctx.rotate(rad+mrad);
     ctx.lineWidth = 6;
     ctx.lineCap = 'round';
     ctx.moveTo(0, 10);
     ctx.lineTo(0,-r / 2)
     ctx.stroke();
     //回到之前状态
     ctx.restore();
}
//分针
function drawMinute(minute){
    ctx.save();
    ctx.beginPath();
    var rad= 2 * Math.PI / 60 * minute;
    ctx.rotate(rad);
    ctx.lineWidth = 3;
    ctx.lineCap='round';
    ctx.moveTo(0,10);
    ctx.lineTo(0,-r + 30);
    ctx.stroke();
	ctx.restore();
}
//秒针
function drawSecond(second){
     ctx.save();
     ctx.beginPath();
     ctx.fillStyle='#c14543';
     var rad= 2 * Math.PI / 60 * second;
     ctx.rotate(rad);
     ctx.moveTo(-2,20);
     ctx.lineTo(2,20);
     ctx.lineTo(1, -r+18);
     ctx.lineTo(-1, -r+18);
     ctx.fill();
     ctx.restore();
}
//中心原点
function drawDot(){
     ctx.beginPath();
     ctx.fillStyle = '#fff';
     ctx.arc(0,0,3,0,2*Math.PI,false);
     ctx.fill();
}

//获取当前时间绘制时钟
function draw(){
     //清除内容
     ctx.clearRect(0,0,width,height);
	var now=new Date();
	var hour=now.getHours();
	var minute =now.getMinutes();
	var second=now.getSeconds();
	drawBackGround();
	drawHour(hour,minute)
	drawMinute(minute);
	drawSecond(second);
	drawDot();
     //回到原点为(0,0)的状态
	ctx.restore();
}
draw();
setInterval(draw,1000);
</script>

恒之传说

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas基础学习

1.Canvas元素canvas 元素用于在网页上绘制图形。HTML5 的 canvas 元素使用 JavaScript 在网页上绘制2D图像。在矩形区域的画布上，控制其每一像素，JavaScript 来绘制 2D图形，逐像素进行渲染。可以通过多种方法使用canvas 元素绘制路径、矩形、圆形、字符以及添加图像。2.创建canvas3.绘制canvas 元素本身是没有绘图能
复制链接

扫一扫