HTML5图形绘制学习(1)-- Canvas 元素简介

Canvas元素是HTML5中新增的一个专门用来进行图形绘制的元素。和其名称Canvas一样,它就相当于一个画布,我们可以在其上描绘各种图形。

这里所说的绘制图型,不是指我们可以进行可视化的图形绘制,而是要利用javascript在其中进行进行操作。

这里做个简单的canvas实例:

1.在页面中添加canvas元素

首先在页面中添加canvas元素,需要给定其高度、宽度和唯一标识id<!doctype html>

<html lang="en">

 <head>

  <meta charset="UTF-8">
<script type="text/javascript" src="canvas.js"></script>
</head> <body onload="draw('canvas')"> <h1>Canvas元素示例</h1> <canvas id="canvas" width="400" height="300"> </canvas> </body> </html>

 

2.绘制矩形

在cavas.js文件中做绘制矩形操作:

function draw(id){

    //    1.获取canvas对象

    var canvasDom = document.getElementById(id);

    if(canvasDom == null){

        return false;

    }

    //  2.获取上下文

    var context = canvas.getContext('2d');

    //  3.填充与绘制边框

    context.fillRect(0, 0, 400, 300);

    //  4.设定绘图样式

    context.fillStyle = '#EEF'; // 填充颜色

    //  5.制定线宽

    context.lineWidth = 1;

    //  6.指定颜色值

    context.strokeStyle = 'blue';  // 设定边框颜色

    //  7.绘制矩形

    context.fillRect(50, 50, 100, 100);// 填充矩形

    context.strokeRect(50, 50, 100, 100); // 绘制矩形边框

}

 

最终效果

HTML5图形绘制学习(1)-- Canvas 元素简介

3.绘制圆形

 

function drawCircle(id){

    // 1.获取canvas

    var canvasDom = document.getElementById(id);

    if(canvasDom == null){

        return false;

    }

    // 2.获取上下文

    var context = canvas.getContext('2d');

    // 3.填充颜色

    context.fillStyle = "#EEF";

    // 4.进行绘制

    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);

        //    结束路径

        context.closePath();

        //    填充渐变色

        context.fillStyle = "rgba(255, 0, 0, 0.25)";

        //    进行图形绘制

        context.fill();

    }

}

效果图:

HTML5图形绘制学习(1)-- Canvas 元素简介

你可能感兴趣的:(canvas)