首页 > 代码库 > HTML5图形绘制学习（1）-- Canvas 元素简介

HTML5图形绘制学习（1）-- Canvas 元素简介

2024-07-23 09:51:13   213人阅读

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

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

这里做个简单的canvas实例：

1.在页面中添加canvas元素

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

<html lang="en"> <head>  <meta charset="UTF-8">
  <script type="text/javascript" src="http://www.mamicode.com/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 元素简介


联系
我们