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. Java Web项目的发布

    自己写的项目,我们想部署到其他电脑上,供别人访问. 首先安装jdk,和Tomcat.这里我的Tomcat是免安装版的,根据http://www.cnblogs.com/Joanna-Yan/p/487 ...

  2. 机器学习&数据挖掘笔记_13（用htk完成简单的孤立词识别）

    最近在看图模型中著名的HMM算法,对应的一些理论公式也能看懂个大概,就是不太明白怎样在一个具体的机器学习问题(比如分类,回归)中使用HMM,特别是一些有关状态变量.观察变量和实际问题中变量的对应关系, ...

  3. Java魔法堂：解读基于Type Erasure的泛型

    一.前言 还记得JDK1.4时遍历列表的辛酸吗?我可是记忆犹新啊,那时因项目需求我从C#转身到Java的怀抱,然后因JDK1.4少了泛型这样语法糖(还有自动装箱.拆箱),让我受尽苦头啊,不过也反映自己 ...

  4. 解决ios开发中不合法的网络请求地址

    NSString *const kWebsite = @"http://image.baidu.com/search/index?tn=baiduimage&ipn=r&ct ...

  5. Sandcastle帮助文档生成器使用介绍

    一.软件介绍       Sandcastle是一个管理类库的文档编译器,是用于编译发布组件(Assembly)信息的一个工具,这个工具通过反射和Xslt技术,可以从dll文件及其xml注释(命令行编 ...

  6. 问得最多的十个JavaScript前端面试问题

    我知道有很多人不同意这种类型的面试.其实不管你喜不喜欢,你都得接受.尤其当你是自学的,而且要申请第一份工作时.   我估计很多有人其它方法来证明他自己,像Github/ 项目地址可能是非常理想的证明方 ...

  7. Auto Mapper03

      经过上一篇博客的学习,大体了解了Auto Mapper的运行机制和操作流程.我们下来学习下,AutoMapper里面具体的一些东西. 一:规则       当我们使用AutoMapper创建实体和 ...

  8. C#基础02

    学习"传智播客视频基础"做的课堂笔记,您有幸读到,若其中有错误部分,请您务必指明.另外请给出您的宝贵建议,谢谢. **************基础知识************ 1: ...

  9. 解决android sdk 无法更新

    今天更新sdk,遇到了更新下载失败问题: Fetching https://dl-ssl.google.com/android/repository/addons_list-2.xmlFetched ...

  10. 如何使用C#创建WebService

    使用C#创建WebService,服务端的webservice是必须,中间的soap,Xml我们不用去关心.下面是使用C#创建WebService的简单介绍. AD:51CTO技术沙龙 | 赋予APP ...