利用canvas绘制矩形和圆形

最新推荐文章于 2024-03-27 21:00:16 发布

小白变怪兽

最新推荐文章于 2024-03-27 21:00:16 发布

阅读量1.5k

点赞数 2

分类专栏： html5 文章标签： canvas

本文链接：https://blog.csdn.net/u013558749/article/details/48134839

版权

html5 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

首先先来简单的了解一下canvas,canvas就相当于是一块画布，我们可以在上边绘制任何我们需要的图形。（如我们下边需要讲的矩形和圆形。）

首先我们要先制定ID,width,height;在脚本处引入canvas.js(一会js代码都存放在这里面)另外不要忘记很重要的一步，那就是在body处加载函数οnlοad=‘draw(canvas)’<这里draw函数是我们在js代码中的函数名。>

接下来就是正式开始绘图了；

首先，先编写简单的html代码：
代码如下所示：

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="js/canvas.js" type="text/javascript" charset="gb2312"></script>
        <!--利用fillstyle和stokestyle可以设置填充样式以及边框样式。。-->
    </head>
    <body onload="draw('canvas')">
        <h1>canvas元素实例</h1>
        <canvas id="canvas" width="400" height="300">查看是否支持</canvas>
    </body>
</html>

//接下来编写矩形块：

function draw(id){ 
    var canvas = document.getElementById('canvas');
    if(canvas == null){ 
        return false;
    }
    var context = canvas.getContext('2d');
    //绘制矩形
    context.fillStyle = '#ff4200';//fillStyle代表的是填充颜色
    context.fillRect(0,0,400,300);//fillRect中第一第二个参数代表的是开始的坐标位置，这里是0，0也就是代表从左上角开始，第三第四个参数代表的是所绘制的图形的宽和高。
    context.fillStyle = 'red';
    context.strokeStyle = 'blue';//strokeStyle代表的是边框的颜色
    context.lineWidth = 2;
    context.fillRect(50,50,100,100);//fillRect里的第一、二个参数代表的开始的坐标位置，第三和第四个参数代表的是绘制图形的宽高。
    context.strokeRect(50,50,100,100);
    //context.clearRect(50,50,100,100);//clearRect()方法实现的是让选定的区域的填充色变为透明。。

}

实现效果图如下图所示：
这里写图片描述
//接下来编写圆形

function draw(id){ 
    var canvas = document.getElementById('canvas');
    if(canvas == null){ 
        return false;
    }
    var context = canvas.getContext('2d');
    context.beginPath();
    context.arc(125,125,50,0,Math.PI*2,true);//第一和第二个参数代表的是开始坐标，第三个参数代表的圆形半径，第四和第五分别代表的是开始的角度和结束的角度，最后一个true代表的是顺时针方向
    context.closePath();
    context.fillStyle = 'rgba(255,0,0,0.25)';
    context.fill();//fill() 方法填充当前的图像（路径）,默认颜色是黑色。

}

实现效果图如下图所示：
这里写图片描述

//层叠式圆实现酷炫效果（在上边圆形的实现基础上。。）

function draw(id){ 
    var canvas = document.getElementById('canvas');
    if(canvas == null){ 
        return false;
    }
    var context = canvas.getContext('2d');
    context.fillStyle = '#dedede';
    context.fillRect(0,0,400,300);
    var n = 0;
    for(var i=0;i<=10;i++){ 
    context.beginPath();
        context.arc(i*25,i*25,i*10,0,Math.PI*2,true);第一和第二

个参数代表的是开始坐标，第三个参数代表的圆形半径，第四和第五分别代表的

是开始的角度和结束的角度，最后一个true代表的是顺时针方向
        context.closePath();
        context.fillStyle = 'rgba(255,0,0,0.25)';
        context.fill();//fill() 方法填充当前的图像（路径）。默认颜色是黑色。
}