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); // 绘制矩形边框
}

最终效果

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 元素简介的更多相关文章

  1. HTML5图形绘制

    要在HTML5中绘制图形,首先要放置一个canvas元素 <canvas id="canvas" width="400" height="300 ...

  2. 详解HTML5中的进度条progress元素简介及兼容性处理

    一.progress元素基本了解 1.基本知识 progress元素属于HTML5家族,指进度条.IE10+以及其他靠谱浏览器都支持. 注释:Internet Explorer 9 以及更早的版本不支 ...

  3. html5--5-1 了解canvas元素

    html5--5-1 了解canvas元素 学习要点 如何在HTML5文档中添加canvas元素 canvas的属性 了解canvas坐标系 了解script元素 绘制一条直线(准确的说是线段) 什么 ...

  4. HTML5新增及移除的元素

    HTML经过10多年的发展,其元素经历了废弃与不断重新定义的过程.为了更好的处理现在的互联网应用,HTML5新增了图形绘制.多媒体播放.页面结构.应用程序存储.网络工作等新元素.http://hove ...

  5. 小强的HTML5移动开发之路（6）——Canvas图形绘制基础

    来自:http://blog.csdn.net/dawanganban/article/details/17686039 在前面提到Canvas是HTML5中一个重要特点,canvas功能非常强大,用 ...

  6. HTML5<canvas>标签:使用canvas元素在网页上绘制线条和圆(1)

    什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以 ...

  7. HTML5学习总结——canvas绘制象棋(canvas绘图)

    一.HTML5学习总结——canvas绘制象棋 1.第一次:canvas绘制象棋(笨方法)示例代码: <!DOCTYPE html> <html> <head> & ...

  8. [html] 学习笔记-Canvas图形绘制处理

    使用Canvas API 可以将一个图形重叠绘制在另外一个图形上,也可以给图形添加阴影效果. 1.Canvas 图形组合 通过 globalCompositeOperation = 属性 来指定重叠效 ...

  9. HTML5移动开发学习笔记之Canvas基础

    1.第一个Canvas程序 看的是HTML5移动开发即学即用这本书,首先学习Canvas基础,废话不多说,直接看第一个例子. 效果图为: 代码如下: <!DOCTYPE html> < ...

随机推荐

  1. （原）Ubuntu16 中安装torch版的cudnn

    转载请注明出处: http://www.cnblogs.com/darkknightzh/p/5668471.html 参考网址: https://devtalk.nvidia.com/default ...

  2. js数组小结

    1.js数组使用sort()排序 var a = ["1","12","3","4","0"]; d ...

  3. jdk配置环境变量

    介绍在linux下配置jdk环境变量的几种常用方法. 首先在linux下安装jdk,如果出现提示权限不够(且root下也提示权限不够),可用#ls -l filename命令查看一下,如果显示类似如: ...

  4. Backward Digit Sums（POJ　3187）

    Backward Digit Sums Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 5495   Accepted: 31 ...

  5. Knight Moves（BFS,走’日‘字）

    Knight Moves Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Tota ...

  6. C＃安装程序制作让安装后的程序开机自动运行

    1.创建安装项目后要在自己的解决方案是添加一个新的类库项目(ClassLibrary1),并在新类库中添加一下安装程序类(Installer1),在Installer1类中添加如下代码: string ...

  7. Linux系统编程（24）——信号的生命周期

    信号生命周期为从信号发送到信号处理函数的执行完毕. 对于一个完整的信号生命周期(从信号发送到相应的处理函数执行完毕)来说,可以分为三个重要的阶段,这三个阶段由四个重要事件来刻画:信号诞生:信号在进程中 ...

  8. web前端设计：JQuery MINI UI

    JQuery MINIUI 个人感觉用起来很爽,所以在此记录之,以后开发过程可能作为备选项.它能缩短开发时间,减少代码量,使开发者更专注于业务和服务端,轻松实现界面开发,带来绝佳的用户体验.在线下载地 ...

  9. 怎样使用LaTeX输入葡萄牙语等语言中的特殊字符

    论文中引用了大名鼎鼎ER random graph model,但是这两位的名字不太好打,发现Google Scholar中直接下载的bib文件中也是错的.找了一会,发现转义字符已经定义得很好了.只是 ...

  10. hdu1556 Color the ball

    #include <iostream> #include <cstdio> #include <cstring> #include <algorithm> ...