HTML5中canvas的fillRect、arc用法

原创 2015年11月20日 10:23:21

1、要使用html5,首先要有一个支持html5的浏览器,比如:火狐,谷歌等等,首先在body区域加入一个canvas标签,id为canvas-fram,如一下代码:

<canvas id="canvas-fram"></canvas>
2、在head区域加入一个draw2D函数,在函数内通过document.getElementById("canvas-fram")获得canvas标签对象,然后在通过该对象的getContext("2d")获得可画图形的画板,最后通过fillRect(x,y,width,height)画一个矩形,其中x,y是坐标点,width,height是矩形的宽和高,如一下代码所示:

<script>
        function draw2D(){
            var canvas=document.getElementById("canvas-fram");
            if(canvas==undefined){
                return ;
            }
            var context=canvas.getContext("2d");
            context.fillRect(0,0,100,100);
            //函数原型为context.fillRect(x,y,widht,height)
            //其中x,y坐标位置即图形的左上角位置,width,height表示图形的长和宽,填充颜色默认黑色
        }
    </script>

3、最后在body添加一个onload="draw2D()",意思是在加载的时候调用此函数,那么完整的代码如下所示:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script>
        function draw2D(){
            var canvas=document.getElementById("canvas-fram");
            if(canvas==undefined){
                return ;
            }
            canvas.width=1000;  //设置画布的宽
        canvas.height=1000; //设置画布的高
            var context=canvas.getContext("2d");
            context.fillRect(0,0,100,100);
            //函数原型为context.fillRect(x,y,widht,height)
            //其中x,y坐标位置即图形的左上角位置,width,height表示图形的长和宽,填充颜色默认黑色
        }
    </script>
</head>
<body onload="draw2D()">
<canvas id="canvas-fram"></canvas>
</body>
</html>

4、运行效果如下图所示:

5、最后将说明注释到代码中,如下代码:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script>
        function draw2D(){
            var canvas=document.getElementById("canvas-fram");
            if(canvas==undefined){
                return ;
            }
            canvas.width=1000;  //设置画布的宽
            canvas.height=1000; //设置画布的高
            var context=canvas.getContext("2d");
            context.fillRect(0,0,100,100);
            //函数原型为context.fillRect(x,y,widht,height)
            //其中x,y坐标位置即图形的左上角位置,width,height表示图形的长和宽,填充颜色默认黑色
            context.fillStyle="blue";        //设置下一个图形的填充颜色为蓝色
            context.fillRect(110,0,100,100);    //在坐标为110,0处画一个矩形
            context.strokeRect(220,0,100,100);  //画一个空心的矩形,就是没有填充颜色,边框默认是灰色的
            context.strokeStyle="red";       //将边框的颜色设置为红色
            context.strokeRect(330,0,100,100); //画一个边框为红色的矩形

            context.fillStyle="rgba(255,0,0,0.5)";//设置颜色为红色,透明度为0.5
            context.fillRect(0,110,100,100);           //

            context.strokeStyle="rgba(0,255,0,0.5)"//设置边框为绿色,透明度为0.5
            context.strokeRect(110,110,100,100);

            context.clearRect(50,50,100,100);//清除画布上的图形,50,50为坐标,100,100位宽和高

            context.beginPath();                                //路径的开始,在此注释掉也可以
            context.arc(200, 330, 100, 0, Math.PI * 2, true);  //画一个半径为100的圆形,此时只保存到显存中,而没有绘制到画布上
            context.closePath();                                //关闭路径,在此注释掉也可以
            context.fillStyle = 'rgba(0,0,255,0.25)';       //设置填充颜色
            context.fill();                                     //将图形绘制到画布上
        }
    </script>
</head>
<body onload="draw2D()">
<canvas id="canvas-fram"></canvas>
</body>
</html>

最后运行效果如下:



版权声明:本文为博主原创文章,未经博主允许不得转载。

FillRect与FrameRect用法

FillRect  函数功能:该函数用指定的画刷填充矩形,此函数包括矩形的左上边界,但不包括矩形的右下边界。  函数原型:int FillRect(HDC hdc, CONST RECT *lprc,...

在Eclipse中部署GeoServer代码

本文主要介绍了在工作中使用Eclipse编译GeoServer1.7.4版本中所参考的英文资料,并且加上了一些自己在编译部署时所遇到的问题和解决的办法。...

GeoServer 常见问题总结

Geoserver安装环境 Geoserver在部署发布服务时,经常会遇到如下问题,现总结如下: 1.忘记了GeoServer Web Admin Page的登陆用户名和密码怎么办? 存储位置:...

HTML5:canvas基本属性与用法介绍

  • 2012年01月29日 15:06
  • 1.14MB
  • 下载

HTML5 Canvas arc()函数讲解

为大家介绍曲线的语法。 如果要创建一个圆形,我们可以使用arc()方法。 语法:arc(定义一个中心点,半径,起始角度,结束角度,和绘图方向:顺时针或逆时针) 代码:context.arc(c...

[HTML5].Canvas.easel.js.arc.arcTo 绘制弧线

easeljs的arcTo参数说明: Graphics.ArcTo (     x1 y1 x2 y2 radius ) Defined in Graphics.ArcTo:1684 Para...

HTML5之CANVAS 用法示例汇总

Your browser does not support the canvas element. Your browser does not support the canvas element.Y...

html5之Canvas(基础用法,转换矩阵,图像混合)

终于到了这里,也是我回来看这些的初衷因为实在太6了,这个东东。 不了解为什么他很6的可以感受一下: http://codepen.io/dissimulate/pen/KrAwx(2d) http:/...

html5 Canvas画图教程(5)—canvas里画曲线之arc方法

在canvas画线条这篇文章中,我讲了画直线的方法,按理这篇画曲线的文章早该发了,但由于canvas画曲线比较特殊,我还没摸透,所以要一步步尝试。 canvas里画曲线的难点之一,就在于他连曲线...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:HTML5中canvas的fillRect、arc用法
举报原因:
原因补充:

(最多只允许输入30个字)