boomboomboomboom

导航

绘制矩形及园

 

 

前言

今天学习了javascript脚本语言及canvas元素，我想用它们绘制出几个简单的图形。

 

0x01)绘制矩形

首先，我们要了解几个基本的概念：

canvas元素（标签）：

它是一个用于绘制图像的标签，元素本身并没有绘制能力（它仅仅是图形的容器） 您必须使用脚本来完成实际的绘图任务，此标签我用到了四种属性分别为id、width、height、style。

1）id属性用于定义一个名称

2）width属性用于定义矩形的宽度

3）height属性用于定义矩形的高度

4）style属性用于定义矩形边框的像素及颜色

 

script元素：

它是一个用于装载javascript脚本的容器你可在里面通过javascript脚本绘制出丰富多彩的图像，你需要添加一个参数来声明此脚本的类型type属性可以帮助我们完成；var用于定义一个变量名例如var s=3定义一个变量s并赋值为3。

 

矩形脚本

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML 5 canvas fillStyle 属性</title>
</head>
<body>
<h1>HTML 5 canvas fillStyle 属性</h1>
<!--
定义一个画布
边框1px颜色#d3d3d3
-->
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
<script type="text/javascript">
//第一个id对象的引用
var c=document.getElementById("myCanvas");
//返回一个画布绘画环境
var ctx=c.getContext("2d");
//定义环境的背景颜色
ctx.fillStyle="#0000ff";
//物体位置x=20、y=20位置;绘制150*100的已填充的矩形。
ctx.fillRect(20,20,150,100);
</script>
</canvas>
</body>
</html>

 

0x02)绘制圆

 为什么Context前面有个2D呢，没错，它还有个3D Context，叫做WebGL，这篇文章不做讨论。

      要取得这只“画笔”，需要用到getContext()方法，并传入"2d"作为参数：

var drawing=document.getElementById("myCanvas");
var context=drawing.getContext("2d");

      好，我们有了这只“画笔”，就可以为所欲为了。我们可以画矩形、弧线和路径等。

      还有一点要说明，2D Context的 坐标开始于元素的左上角，原点坐标是(0,0)。所有坐标值都基于这个原点计算，x 方向自左向右为正，y 方向自上而下为正。

      我们先来随便画点东西：

//绘制 150*100 像素的已填充矩形
context.fillRect(10, 10, 50, 50);

      没错，我们画了个矩形，这个矩形从（10，10）开始画，宽和高都为50px。

 

 

绘制圆的几个方法：

        <script type="text/javascript">

            var drawing=document.getElementById("myCanvas");
            var context=drawing.getContext("2d");
            //新疆第一个路径
            context.beginPath();
            //绘制一个直角三角形
            //起点坐标（85,35）
            context.moveTo(85,35);
            //终点坐标（120,75）
            context.lineTo(120,75);
            context.arc(85,35,25,0,2*Math.PI,false);
            //创建从当前点到开始点的路径
            context.closePath();
            //进行绘制
            context.stroke();
        </script>

 

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <style type="text/css" media="screen">
            #myCanvas {
                background-color: #ccc;
                width: 100%;
                height: 100%;
            }
        </style>
    </head>
    <title>绘制园</title>
    <body>
        <canvas id="myCanvas">
            <script type="text/javascript">

                var drawing=document.getElementById("myCanvas");
                var context=drawing.getContext("2d");
                //新疆第一个路径
                context.beginPath();
                //绘制一个直角三角形
                //起点坐标（85,35）
                context.moveTo(85,35);
                //终点坐标（120,75）
                context.lineTo(120,75);
                //创建弧/曲线（用于创建圆或部分圆）参数(x,y,圆大小,弧度）
                context.arc(85,35,25,0,2*Math.PI,false);
                //创建从当前点到开始点的路径
                context.closePath();
                //进行绘制
                context.stroke();
            </script>
        </canvas>
        
    </body>
</html>

 

 

效果

 

 

结尾

要注意每个元素的格式<xx></xx>

 

posted on 2018-09-30 15:46  boomboomboomboom  阅读(201)  评论(0)    收藏  举报