canvas 元素用于在网页上绘制图形。

什么是canvas?

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。

画布是一个矩形区域,您可以控制其每一像素。

canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

创建画布:

向 HTML5 页面添加 canvas 元素。

规定元素的 id、宽度和高度:

<canvas id="myCanvas" width="200" height="100"></canvas>

canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成:

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>


阴影:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.shadowBlur=10;----阴影的模糊级别
ctx.shadowOffsetX=20;----阴影偏移像素
ctx.shadowColor="black";---阴影
ctx.fillStyle="blue";
ctx.fillRect(20,20,100,80);


线条:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d"); ctx.beginPath();
ctx.lineWidth=10;----设置线条粗细
ctx.lineCap="round";---round(圆形的结束帽)/square(正方形结束帽)
ctx.moveTo(20,20);
ctx.lineTo(20,200);
ctx.stroke();
ctx.lineJoin="round";---当两条线条交汇时,创建边角类型(round-圆角/bevel-斜角/miter-尖角)
ctx.miterLimit=5;---设置或返回最大斜接长度。


矩形:

ctx.clearRect(20,20,100,50);---清空矩形
context.quadraticCurveTo(控制点x,控制点y,结束点x,结束点y);---二次贝塞尔曲线
context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);---三次贝塞尔曲线


html5画布基础的更多相关文章

  1. HTML5画布(基础篇11-10)

    <script type="text/javascript"> $(function(){ var s = $("#myCanvas")[0]; v ...

  2. HTML5 Canvas基础知识

    HTML5画布 1.创建一个画布         <canvas id="myCanvas" width="200" height="100&q ...

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

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

  4. HTML5画布生成的3D飞船舰队效果

    在线演示 本地下载 使用HTML5画布2D来模拟3D的空间效果,生成舰队飞行效果,了解如何开发,请阅读下面代码相关“轻视频”: HTML5画布模拟生成3D的舰队飞行效果

  5. 使用HTML5画布(canvas)生成阴影效果

    来源:GBin1.com 使用HTML5的画布特性,我们可以创建图形,在这片文章中,我们将创建图形的阴影. var canvas = document.getElementById('shadowca ...

  6. HTML5 画布canvas元素

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

  7. 《HTML5 CANVAS基础教程》读书笔记

    一.HTML5简介 1.HTML5新特性 1)结构元素:section,header,hgroup,footer,nav,article,aside, 2)内容元素:figure,figcaption ...

  8. 06. Web大前端时代之:HTML5+CSS3入门系列~HTML5 画布

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 我们先看看画布的魅力: 初始画布 canvas默认是宽3 ...

  9. HTML5零基础学习Web前端需要知道哪些?

    HTML零基础学习Web前端网页制作,首先是要掌握一些常用标签的使用和他们的各个属性,常用的标签我总结了一下有以下这些: html:页面的根元素. head:页面的头部标签,是所有头部元素的容器. b ...

随机推荐

  1. 【转载】说说JSON和JSONP,也许你会豁然开朗,含jQuery用例

    前言: 说到AJAX就会不可避免的面临两个问题,第一个是AJAX以何种格式来交换数据?第二个是跨域的需求如何解决?这两个问题目前都有不同的解决方案,比如数据可以用自定义字符串或者用XML来描述,跨域可 ...

  2. TP框架常用(一)

    25.显示最后一条查询的sql语句:主要用于在连贯操作时,检测拼接的sql语句是否正确 echo $this->db->last_query();//如:select * from pt_ ...

  3. 《玩转D语言系列》三、轻松大跃进,把它当C语言先用起来

    前面说过,本系列文章的前提是您懂C语言,懂面向对象中的一些概念,如果没有任何变成基础,从零开始学习D语言将是一个漫长的过程,因为很多概念都要重新诠释,让一个没有基础的人经过漫长的学习过程,然后还找不到 ...

  4. handlebars.js 用 <br>替换掉 内容的换行符

    handlebars.js 用 <br>替换掉 内容的换行符 JS: Handlebars.registerHelper('breaklines', function(text) { te ...

  5. win10安装oracle 11g 报错 要求的结果: 5.0,5.1,5.2,6.0 6.1 之一 实际结果: 6.2

    Windows10下安装Oracle11G.10G,都会提示如下信息 正在检查操作系统要求... 要求的结果: 5.0,5.1,5.2,6.0 之一 实际结果: 6.1 检查完成.此次检查的总体结果为 ...

  6. [原创]win10 命令行出现问号而且无法chcp 936

    现象: 命令行中中文字符显示为问号,输入chcp 936会提示 invlalid page code. 解决: 设置-区域和语言-时钟,语言和区域-区域-更改位置-管理-非Unicode中所使用的语言 ...

  7. 常用oracle表空间查询语句

    --查询数据库表空间使用情况 select a.tablespace_name,a.bytes/1024/1024 "Sum MB",(a.bytes-b.bytes)/1024/ ...

  8. cmd常用命令符

    想成为电脑高手必须掌握的八个cmd 命令 http://www.cr173.com/html/3917_1.html ping命令的其他技巧:在一般情况下还可以通过ping对方让对方返回给你的TTL值 ...

  9. poj3253 Fence Repair

    http://poj.org/problem?id=3253 Farmer John wants to repair a small length of the fence around the pa ...

  10. 基于webrtc的资源释放问题(二)

    基于webrtc的资源释放问题(二) ——建立连接的过程中意外中断 应用背景: 我们在打电话的时候会不会遇到这种情况?打电话的时候未接通之前挂掉了电话,或者在接通之后建立的连接的过程中挂掉电话? 特别 ...