一、Canvas概念介绍

1、概念 Canvas ： 画布

2、作用 ： HTML5 Canvas 元素用于图形的绘制, 通过脚本(通常是JavaScript)来完成。它本身只是个图形容器,必须使用脚本来绘制图像

二、画图步骤

1、创建一个画布

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>

注意：<canvas>元素没有边框和内容, 使用 style 属性来添加边框

2、使用JavaScript来绘制图像

<!DOCTYPE html>

<html>

<head> 

<meta charset="utf-8"> 

<title>菜鸟教程(runoob.com)</title> 

</head>

<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">

HTML5 canvas 标签。</canvas>

<script>

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

ctx.font="30px Arial";

ctx.fillText("Hello World",10,50);

ctx.fillStyle="#FF0000";

ctx.fillRect(0,0,20,25);

</script>

</body>

</html>

JavaScript画图代码步骤 ：

①、首先, 找到canvas元素

var c=document.getElementById("myCanvas");

②、创建Context对象

var ctx=c.getContext("2d");

getContext("2d") 对象是内建的HTML5对象, 拥有多种绘制路径、矩形、图形、字符及添加图像的方法

③、业务代码

三、Canvas用法

1、介绍Canvas常用属性

①、fillStyle属性 ： 可以是CSS颜色、渐变、图案等

②、font ： 定义字体

2、介绍Canvas常用方法

①、fillRect（x, y, width, height）: 定义矩形的填充方式

②、fillText（text, x, y）： 在canvas绘制文本

③、drawImage（image, x, y）: 图像画到画布上

四、参考文献

1、http://www.runoob.com/html/html5-canvas.html

2、http://www.runoob.com/tags/ref-canvas.html

HTML5画布Canvas的更多相关文章

  1. HTML5画布(CANVAS)速查简表

    HTML5画布(CANVAS)速查简表 http://www.webhek.com/misc/html5-canvas-cheat-sheet/

  2. HTML5 画布canvas元素

    HTML5的canvas元素以及随其而来的编程接口Canvas API应用前景极为广泛.简单地说,canvas元素能够在网页中创建一块矩形区域,这块矩形区域可以成为画布,这其中可以绘制各种图形.可别小 ...

  3. 关于HTML5画布canvas的功能

    一.画布的使用 1.首先创建一个画布(canvas) <canvas id=”myCanvas” width=”200” height=”100” style=”border:1px solid ...

  4. 10款面向HTML5 画布(Canvas)的JavaScript库

    https://www-evget-com/article/2014/4/9/20799.html

  5. HTML5 画布canvas

    SVG的<defs> <symbols> 元素用于预定义一个元素使其能够在SVG图像中重复使用 <svg xmlns="http://www.w3.org/20 ...

  6. 转载：将画布(canvas)图像保存成本地图片的方法

    之前我曾介绍过如何将HTML5画布(canvas)内容转变成图片形式,方法十分简单.但后来我发现只将canvas内容转变成图片输出还不够,如何能将转变后的图片保存到本地呢? 其实,这个方法也是非常简单 ...

  7. 面向画布(Canvas)的JavaScript库

    面向画布(Canvas)的JavaScript库 总结 每个库各有特色,根据需求选择   学习要点 面向画布(Canvas)的JavaScript库 EaselJS 是一个封装了 HTML5 画布(C ...

  8. 浅尝HTML5之canvas

    转自:http://segmentfault.com/a/1190000000661407/ HTML5新标签 HTML5新引入header,footer,article,section,aside和 ...

  9. 用html5的canvas画布绘制贝塞尔曲线

    查看效果:http://keleyi.com/keleyi/phtml/html5/7.htm 完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...

随机推荐

  1. cocos2dx场景切换中init、onEnter、onEnterTransitionDidFinish的调用顺序

    这些方法调用的先后顺序如下(使用 replaceScene 方法): 1. 第2个场景的 scene 方法 2. 第2个场景的 init 方法 3. 第2个场景的 onEnter 方法 4. 转场 5 ...

  2. vim - 查找替换

    :%s/\<key_word_replaced\>/word_you_want_to_say/g

  3. Jquery图片放大镜

    一般在“在线商城.电子商务.企业产品介绍”等地方经常会看到一些图片放大镜的功能,而做这个功能一般是会用一个js包——enlarge.js(这是jquery图片放大镜的插件).Enlarge 是一个基于 ...

  4. MySQL基础之第9章 触发器

    触发器(TRIGGER)是由事件来触发某个操作.这些事件包括INSERT语句.UPDATE语句和DELETE语句.当数据库系统执行这些事件时,就会激活触发器执行相应的操作.MySQL从5.0.2版本开 ...

  5. rpm 命令参数使用详解

    RPM是RedHat Package Manager(RedHat软件包管理工具)类似Windows里面的“添加/删除程序” rpm 执行安装包 二进制包(Binary)以及源代码包(Source)两 ...

  6. #define offsetof(TYPE, MEMBER) ((size_t) &((TYPE *)0)->MEMBER)

    #define offsetof(TYPE, MEMBER) ((size_t) &((TYPE *)0)->MEMBER)宏的运行机理:1. ( (TYPE *)0 ) 将零转型为TY ...

  7. JS 代码编一个倒时器

    有时候在生活中,你需要一个JavaScript倒计时时钟,而不是一个末日装置设备.不管你是否有一次约会,销售.促销.或者游戏,你可以受益于使用原生JavaScript构建一个时钟,而不是拿到一个现成的 ...

  8. POJ 2253 Difference of Clustering

    题意:给出一堆点,求从起点到终点的所有通路中相邻点的距离的最大值的最小值.(意思就是自己百度吧……) 解法:用相邻点的最大值作为权值代替路径的距离跑最短路或者最小生成树.然后我写了一个我以为是优化过的 ...

  9. Java中的10颗语法糖

    语法糖(Syntactic Sugar):也称糖衣语法,指在计算机语言中添加的某种语法,这种语法对语言的功能没有影响,但是更方便程序员使用.通常来说,使用语法糖能够增加程序的可读性,减少程序代码出错的 ...

  10. bzoj 3207 花神的嘲讽计划Ⅰ（哈希法+主席树）

    [题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=3207 [题意] 给定一个文本串,多次询问K长的模式串是否在文本[l,r]区间内出现. ...