HTML5学习笔记-使用canvas绘制图形

canvas标签是一个矩形区域,它包含两个属性,width和height,默认为300px和150px.

常用形式如下:

<canvas id="mycanvas" width="400" height="200" style="border:1px solid  #color;">
...提示信息
</canvas>

也可写成形式如:

<canvas id="canvas" width="400" height="300" style="border:1px solid red" />

可是我在运行时发现第二个写法会导致<canvas>之后的元素无法在浏览器中显示出来.

在body中将canvas放好后,就可以使用JavaScript在网页上绘制图形了。

 1 <!--绘制矩形-->
 2 <canvas id="myRect" width="300" height="200" style="border:1px solid blue;">
 3 Your browser does not support the canvas element.
 4 </canvas>
 5
 6 <script type="text/javascript">
 7 var r=document.getElementById("myRect");
 8 var cxt=r.getContext("2d");
 9 cxt.fillStyle="rgb(0,0,200)";
10 cxt.fillRect(10,20,100,100); //绘制矩形函数,宽高100,左上角坐标(10,20)
11 </script>

绘制图形步骤:

step1  使用id寻找canvas元素,获取当前画布对象。

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

step2 创建context对象:

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

返回一个指定contextId的上下文对象,如果id不被支持则返回null,目前参数必须是“2d”,是二维的,将来可能有“3d”。

step3 绘制图形

cxt.fillStyle="#color";

cxt.fillRect(x,y,width,height);

在此基础上可以画出多种图形。

 1 <!--绘制圆形-->
 2 <canvas id="myCircle" width="300" height="200" style="border:1px solid blue;">
 3 Your browser does not support the canvas element.
 4 </canvas>
 5
 6 <script type="text/javascript">
 7 var c=document.getElementById("myCircle");
 8 var cxt=c.getContext("2d");
 9 cxt.fillStyle="#ffaa00";
10 cxt.beginPath(); //开始绘制路径
11 cxt.arc(70,18,15,0,Math.PI*2,true); //x,y定义的是原点,半径,开始的弧度,结束的弧度,圆的方向值为true或false
12 cxt.closePath();
13 cxt.fill();//进行填充
14 cxt.stroke();//设置边框
15
16 </script>
 1 <!--绘制直线-->
 2 <canvas id="myLine" width="300" height="200" style="border:1px solid blue;">
 3 Your browser does not support the canvas element.
 4 </canvas>
 5
 6 <script type="text/javascript">
 7 var l=document.getElementById("myLine");
 8 var cxt=l.getContext("2d");
 9 cxt.fillStyle="#ffaa00";
10 cxt.beginPath();
11 cxt.strokeStyle="rgb(0,182,0)";
12 cxt.moveTo(10,10); //起点
13 cxt.lineTo(150,50); //终点
14 cxt.lineTo(10,50); //终点
15 cxt.lineWidth=14;  //绘制的线粗细为14px
16 cxt.stroke(); //绘制边框
17 cxt.closePath();
18 </script>
 1 <!--绘制贝塞尔曲线-->
 2 <h1>绘制贝塞尔曲线</h1>
 3 <canvas id="myBezier" width="400" height="300" style="border:1px solid blue;">
 4 Your browser does not support the canvas element.
 5 </canvas>
 6
 7 <script type="text/javascript">
 8
 9     var bezier=document.getElementById(‘myBezier‘);
10
11     var context=bezier.getContext("2d");
12     context.fillStyle="#eeeeff";
13     context.fillRect(0,0,400,300);//在这里做一个背景板,可不写
14     var n=0;
15     var dx=150;
16     var dy=150;
17     var s=100;
18     context.beginPath();
19     context.globalCompositeOperation="and";
20     context.fillStyle="rgb(100,255,100)";
21     context.strokeStyle="rgb(0,0,100)";
22     var x=Math.sin(0);
23     var y=Math.cos(0);
24     var dig=Math.PI/15*11;
25     for(var i=0;i<30;i++){
26         var x=Math.sin(i*dig);  //改变弧度
27         var y=Math.cos(i*dig);
28         context.bezierCurveTo(dx+x*s,dy+y*s-100,dx+x*s+100,dy+y*s,dx+x*s,dy+y*s);
29         //循环绘制贝塞尔曲线 控制点1(dx+x*s,dy+y*s-100)控制点2(dx+x*s+100,dy+y*s)当前位置(dx+x*s,dy+y*s)
30     }
31     context.fill();
32     context.stroke();
33     context.ClosePath();
34 </script>

效果如下:

2016-07-14  09:46:49

时间: 2024-10-14 13:17:10

HTML5学习笔记-使用canvas绘制图形的相关文章

HTML5 Canvas 学习笔记(canvas绘制线条、矩形、多边形、圆形、圆环、组合图形、文字、自定义图像)

学习资源:http://www.w3school.com.cn/html5/html_5_canvas.asp   http://blog.csdn.net/clh604/article/details/8536059   http://www.jb51.net/html5/70307.html 一.对 canvas 的理解 <canvas>标签是 HTML5 中的新标签,像所有的 dom 对象一样它有自己本身的属性.方法和事件. canvas 是用来在网页上绘制图形的(我们通常称之为画布),

html5学习笔记:canvas

1.什么是canvas? 可以绘制图形的标签.一般用javascript来绘制. 2.创建一个画布 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 </head> 6 <body> 7 <canvas id="mycanvas" width="100" height="100"></

html5 Canvas绘制图形入门详解

html5,这个应该就不需要多作介绍了,只要是开发人员应该都不会陌生.html5是「新兴」的网页技术标准,目前,除IE8及其以下版本的IE浏览器之外,几乎所有主流浏览器(FireFox.Chrome.Opera.Safari.IE9+)都已经开始支持html5了.除此之外,在移动浏览器市场上,众多的移动浏览器也纷纷展开关于「html5的支持能力以及性能表现」的军备竞赛.html作为革命性的网页技术标准,再加上众多浏览器厂商或组织的鼎力支持,可以想见,html5将会成为未来网页技术的领头羊. ht

HTML5—canvas绘制图形(1)

1.canvas基础知识 canvas元素是HTML5中新增的一个重要的元素,专门用来绘制图形,不过canvas本身不具备画图的能力,在页面中放置了canvas元素,就相当于在页面中放置了一块矩形的“画布”,我们可以利用js脚本在“画布”上绘制图形. 1.1canvas元素 在利用canvas绘制图形之前,我们首先需要在页面中放置一个canvas元素,如下代码: <canvas id="mycanvas" width="400" height="40

html5学习笔记(3)--主题结构元素-1

html5学习笔记(3)--主题结构元素-1 Article元素 以下为对应代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <article> <header> <h1>极客学院</h

HTML5学习笔记(二)——表单1

表单一直是网页必不可少的一部分,一直以来,表单的作用被无限扩展,发展出了诸多新奇的用法,老版的HTML只支持很少的一部分常用表单,许多的新表单都需要借助CSS与JavaScript语言来进行构建,现在HTML5来了,她带来了新的表单,这些强大的表单项,可以省去一大块复杂的JavaScript代码,很值得去学习. 而且在新的表单里面,不再像以前每个表单都必须位于<form></form>之内,只要在<form></form>内定义一个id,然后在网页任何位置都

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

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTML5学习笔记</title> </head> <body bgcolor="#90ee90"> 1.Html5的元素<br/><br/> 元素指的是从開始标签到结束标签的全部代码<

html5学习笔记2

css3选择器 1.通过元素的关键字,如p,div等 2.通过id属性 3.通过class属性引用 3.1通过class属性引用p标签,如:p.text{}//text样式只适用于p 4.通过任意键引用 例如:p[name]{}//仅引用带有name属性的p标签 p[name="my"]{}//仅引用带有name属性等于"my"的p标签 还可以使用正则表达式p[name^="my"]{} p[name$="my"]{} 5.通

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

在 HTML5 中,使用 Canvas API 绘制图形的知识,可以对绘制图形进行处理,包含使用 Canvas API 绘制渐变图形,使用 Canvas API 的坐标轴变换处理功能绘制变形图形.其中,左上方的点,为坐标轴原点(0,0). 1.绘制渐变图形 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 <script> 6 function draw(id){ 7 va