1.什么是canvas?

可以绘制图形的标签。一般用javascript来绘制。

2.创建一个画布

 <!DOCTYPE html>

 <html>

 <head>

     <title></title>

 </head>

 <body>

     <canvas id="mycanvas" width="100" height="100"></canvas> //创建画布用canvas标签

 </body>

 </html>

3.在画布上绘图。

 <script type="text/javascript">

     //用javascript来绘制图像

     //获取到canvas元素

     var can=document.getElementById("mycanvas");

     //创建html5的内置对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

     var draw=can.getContext("2d");

     //fillStyle();可以是css的颜色，渐变，图案

     draw.fillStyle="red";

     //fillRect(x,y,width,height) 定义填充方式

     draw.fillRect(0,0,125,12);

     </script>

4.canvas-路径

 var can=document.getElementById("mycanvas");

     var draw=can.getContext("2d");

     // 开始一个路径

     draw.beginPath();

     // 设置线的粗细

     draw.lineWidth="5";

     //设置线的颜色

     draw.strokeStyle="green";

     // 线的起点

     draw.moveTo(0,75);

     //线的终点

     draw.lineTo(250,75);

     // 开始绘制路径

     draw.stroke();

     //开始另一个路径

     draw.beginPath();

     // 设置线的粗细

     draw.lineWidth="5";

     draw.strokeStyle="purple";

     draw.moveTo(25,05);

     draw.lineTo(35,25);

     draw.stroke();

效果：

// 其他路径的绘制
arc(x,y,r,start,stop); //画圆

5.canvas-文本

1 // 3绘制文本

2      var can=document.getElementById("mycanvas");

3     var draw=can.getContext("2d");

4     // 设置字体的大小

5     draw.font="30px Arial";

6     //绘制出文字，确定文字的位置

7     draw.fillText("Hello World ",10,25);

8   //绘制空心文字

9     draw.strokeText("Hello",10,25);

6.canvas-渐变

 var can=document.getElementById("mycanvas");

     var draw=can.getContext("2d");

     // 创建渐变

     // 先创建一个线条渐变

     var grd=draw.createLinearGradient(0,0,200,0);

     // 设置渐变的停止位置,以及颜色

     grd.addColorStop(0,"red");

     grd.addColorStop(1,"white");

     //绘制渐变图形

     draw.fillStyle=grd;

     draw.fillRect(10,10,120,80);
　　　　//圆渐变
　　　　ctx.fillRect(10,10,150,80);

html5学习笔记：canvas的更多相关文章

  1. [html5] 学习笔记-Canvas应用

    通过使用HTML5游戏开发的引擎CreatJS,创建HTML5 Canvas上的更好交互. 1.认识CreateJS CreateJS是一个外部库,用它可以比Canvas更方便的绘制图形. 官网:ht ...

  2. [html5] 学习笔记-Canvas 绘制渐变图形与绘制变形图形

    在 HTML5 中,使用 Canvas API 绘制图形的知识,可以对绘制图形进行处理,包含使用 Canvas API 绘制渐变图形,使用 Canvas API 的坐标轴变换处理功能绘制变形图形.其中 ...

  3. [html5] 学习笔记-Canvas标签的使用

    Canvas通过JavaScript来绘制2D图形.Canvas是逐像素渲染的.在Canvas中,一旦图形被绘制完成,它就不会继续得到浏览器的关注.如果其位置发生变化,那么整个场景也需要重新绘制,包括 ...

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

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

  5. html5学习笔记一

    HTML5学习笔记 <video>标记:定义视频,Ogg.MPEG4.WebM三种格式 <video src=”movie.ogg”  controls=”controls”> ...

  6. Html5学习笔记1 元素 标签 属性

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. HTML5学习笔记之表格标签

    HTML5学习笔记之表格标签 其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之基础标签 HTML5学习笔记之表格标签 HTML5学习笔记之表单标签 HTML5学习笔 ...

  8. HTML5 学习笔记（一）——HTML5概要与新增标签

    目录 一.HTML5概要 1.1.为什么需要HTML5 1.2.什么是HTML5 1.3.HTML5现状及浏览器支持 1.4.HTML5特性 1.5.HTML5优点与缺点 1.5.1.优点 1.5.2 ...

  9. HTML5 学习笔记--------》HTML5概要与新增标签！

      一.HTML5概要 1.1.为什么需要HTML5 HTML4陈旧不能满足日益发展的互联网需要,特别是移动互联网.为了增强浏览器功能Flash被广泛使用,但安全与稳定堪忧,不适合在移动端使用(耗电. ...

  10. HTML5学习笔记（一）：HTML简介

    Web前端涵盖的内容较多且杂,主要由3个部分组成:HTML标记语言.CSS样式语言和JavaScript脚本语言组成,而下面我们将先学习最新的标记语言HTML5. <!DOCTYPE>标记 ...

随机推荐

  1. [转载]TFS安装配置教程

    最近公司新开发一个项目要用微软的TFS2013进行项目的源代码管理,以前只是用过SVN,从来没有用过TFS,所以在网上百度.谷歌了好一阵子来查看怎么安装和配置,还好花了一天时间总算是初步的搞定了,下面 ...

  2. 给深度学习入门者的Python快速教程 - 番外篇之Python-OpenCV

    这次博客园的排版彻底残了..高清版请移步: https://zhuanlan.zhihu.com/p/24425116 本篇是前面两篇教程: 给深度学习入门者的Python快速教程 - 基础篇 给深度 ...

  3. Web 开发人员和设计师必读文章推荐【系列三十】

    <Web 前端开发精华文章推荐>2014年第9期(总第30期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各类能够提升网站用户体验的优秀 jQuery 插件,展示前沿的 HTML5 ...

  4. Windows Azure HandBook (3) 浅谈Azure安全性

    <Windows Azure Platform 系列文章目录> 2015年3月5日-6日,参加了上海的Azure University活动.作为桌长与微软合作伙伴交流了Azure相关的技术 ...

  5. JS&CSS文件请求合并及压缩处理研究（四）

    本篇将会尝试对之前的代码进行相关的单元测试,验证路径合并规则的覆盖率及正确性. 熟悉 ASP.NET MVC 开发的朋友应该知道,微软在MVC框架下集成了一款名为 Microsoft.VisualSt ...

  6. Javascript中的正则表达式

    Javascript中的正则表达式 刚开始接触正则表达式的时候,觉得这是个很死板的东西(没办法,计算机不能像人眼一样能很快的辨认出我们需要的结果,它需要一定的规则来对它进行限制),了解的越多,发现这个 ...

  7. shell脚本二

    在shell脚本一 中,我讨论了shell脚本的语法规范,shell脚本的变量,以及shell脚本的测试语句. 仅仅懂得这些只能写简单的脚本,在简单的脚本中各条语句按顺序执行,从而实现自动化的管理,顺 ...

  8. React-Native 给客户端来个「同音词模糊搜索」

    APP上线一段时间有用户反应说不方便找东西,其实APP的数据不大也就三四百条而以,但受限于手机端展示区域太小.信息大爆炸,大家也基本上不会去记具体的名称都是根据模糊的印象进行搜索而且现在大家基本都用拼 ...

  9. 音频文件解析(一)：WAV格式文件头部解析

    WAV为微软公司(Microsoft)开发的一种声音文件格式,它符合RIFF(Resource Interchange File Format)文件规范,用于保存Windows平台的音频信息资源. 文 ...

  10. 利用Abot爬虫和visjs 呈现漫威宇宙

    1. 引言 最近接触Abot爬虫也有几天时间了,闲来无事打算从IMDB网站上爬取一些电影数据玩玩.正好美国队长3正在热映,打算爬取漫威近几年的电影并用vis这个JS库呈现下漫威宇宙的相关电影. Abo ...