html5画布基础
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画布基础的更多相关文章
- HTML5画布(基础篇11-10)
<script type="text/javascript"> $(function(){ var s = $("#myCanvas")[0]; v ...
- HTML5 Canvas基础知识
HTML5画布 1.创建一个画布 <canvas id="myCanvas" width="200" height="100&q ...
- HTML5画布(CANVAS)速查简表
HTML5画布(CANVAS)速查简表 http://www.webhek.com/misc/html5-canvas-cheat-sheet/
- HTML5画布生成的3D飞船舰队效果
在线演示 本地下载 使用HTML5画布2D来模拟3D的空间效果,生成舰队飞行效果,了解如何开发,请阅读下面代码相关“轻视频”: HTML5画布模拟生成3D的舰队飞行效果
- 使用HTML5画布(canvas)生成阴影效果
来源:GBin1.com 使用HTML5的画布特性,我们可以创建图形,在这片文章中,我们将创建图形的阴影. var canvas = document.getElementById('shadowca ...
- HTML5 画布canvas元素
HTML5的canvas元素以及随其而来的编程接口Canvas API应用前景极为广泛.简单地说,canvas元素能够在网页中创建一块矩形区域,这块矩形区域可以成为画布,这其中可以绘制各种图形.可别小 ...
- 《HTML5 CANVAS基础教程》读书笔记
一.HTML5简介 1.HTML5新特性 1)结构元素:section,header,hgroup,footer,nav,article,aside, 2)内容元素:figure,figcaption ...
- 06. Web大前端时代之:HTML5+CSS3入门系列~HTML5 画布
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 我们先看看画布的魅力: 初始画布 canvas默认是宽3 ...
- HTML5零基础学习Web前端需要知道哪些?
HTML零基础学习Web前端网页制作,首先是要掌握一些常用标签的使用和他们的各个属性,常用的标签我总结了一下有以下这些: html:页面的根元素. head:页面的头部标签,是所有头部元素的容器. b ...
随机推荐
- 【转载】说说JSON和JSONP,也许你会豁然开朗,含jQuery用例
前言: 说到AJAX就会不可避免的面临两个问题,第一个是AJAX以何种格式来交换数据?第二个是跨域的需求如何解决?这两个问题目前都有不同的解决方案,比如数据可以用自定义字符串或者用XML来描述,跨域可 ...
- TP框架常用(一)
25.显示最后一条查询的sql语句:主要用于在连贯操作时,检测拼接的sql语句是否正确 echo $this->db->last_query();//如:select * from pt_ ...
- 《玩转D语言系列》三、轻松大跃进,把它当C语言先用起来
前面说过,本系列文章的前提是您懂C语言,懂面向对象中的一些概念,如果没有任何变成基础,从零开始学习D语言将是一个漫长的过程,因为很多概念都要重新诠释,让一个没有基础的人经过漫长的学习过程,然后还找不到 ...
- handlebars.js 用 <br>替换掉 内容的换行符
handlebars.js 用 <br>替换掉 内容的换行符 JS: Handlebars.registerHelper('breaklines', function(text) { te ...
- 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 检查完成.此次检查的总体结果为 ...
- [原创]win10 命令行出现问号而且无法chcp 936
现象: 命令行中中文字符显示为问号,输入chcp 936会提示 invlalid page code. 解决: 设置-区域和语言-时钟,语言和区域-区域-更改位置-管理-非Unicode中所使用的语言 ...
- 常用oracle表空间查询语句
--查询数据库表空间使用情况 select a.tablespace_name,a.bytes/1024/1024 "Sum MB",(a.bytes-b.bytes)/1024/ ...
- cmd常用命令符
想成为电脑高手必须掌握的八个cmd 命令 http://www.cr173.com/html/3917_1.html ping命令的其他技巧:在一般情况下还可以通过ping对方让对方返回给你的TTL值 ...
- poj3253 Fence Repair
http://poj.org/problem?id=3253 Farmer John wants to repair a small length of the fence around the pa ...
- 基于webrtc的资源释放问题(二)
基于webrtc的资源释放问题(二) ——建立连接的过程中意外中断 应用背景: 我们在打电话的时候会不会遇到这种情况?打电话的时候未接通之前挂掉了电话,或者在接通之后建立的连接的过程中挂掉电话? 特别 ...