当前位置: 编程技术>综合
本页文章导读:
Canvas学习笔记二——图形绘制 1.矩形： fillRect(x,y,width,height) :画一个被填满颜色的矩形 strokeRect(x,y,width,height) : 画一个矩形边框 clearRect(x,y,width,height) : 清理出一个矩形区域 .........
基于iptables的网桥防火墙的搭建 基于iptables的网桥防火墙的搭建 目标: 在不改变网络拓补结构的前提下，实现一个防火墙，对经过该防火墙的数据进行过滤。在此，我们主要是想对所有与服务器进行通信的数据进行过滤。结.........
分区truncate操作的介绍及对全局索引和空间释放影响的案例解析 环境：[oracle@localhost ~]$ uname -r 2.6.18-308.el5xen [oracle@localhost ~]$ sqlplus -v SQL*Plus: Release 10.2.0.1.0 - Production ㈠ 语法 .........
[1]Canvas学习笔记二——图形绘制
来源: 互联网 发布时间: 2013-11-05
1.矩形：
fillRect(x,y,width,height) :画一个被填满颜色的矩形
strokeRect(x,y,width,height) : 画一个矩形边框
clearRect(x,y,width,height) : 清理出一个矩形区域
三个函数的参数都是表示矩形的左上角位于( x , y ) ,宽为width，高为height.
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="300" height="300" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
var c=document.getElementById("myCanvas"),
ctx=c.getContext("2d");
ctx.fillRect(25,25,100,100);
ctx.clearRect(45,45,60,60);
ctx.strokeRect(50,50,50,50);
</script>
</body>
</html>
2.线段：
ctx.beginPath();
ctx.lineWidth="5";
ctx.strokeStyle="red"; // 红色路径
ctx.moveTo(0,75);
ctx.lineTo(250,75);
ctx.stroke(); // 进行绘制
1.用beginPath创建路径，如：ctx.beginPath();
2.实际绘图。
3. closePath关闭路径。
4.调用 stroke 或 fill 方法把图形绘制到 canvas 上去。stroke 是绘制图形的边框，fill 会用填充出一个实心图形。
注意：当调用 fill 时，开放的路径会自动闭合，而无须调用 closePath 。
例子：
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="300" height="300" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
var c=document.getElementById("myCanvas"),
ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(75,75,50,0,Math.PI*2,true); // Outer circle
ctx.moveTo(110,75);
ctx.arc(75,75,35,0,Math.PI,false); // Mouth (clockwise)
ctx.moveTo(65,65);
ctx.arc(60,65,5,0,Math.PI*2,true); // Left eye
ctx.moveTo(95,65);
ctx.arc(90,65,5,0,Math.PI*2,true); // Right eye
ctx.stroke();
ctx.beginPath();
ctx.moveTo(40,75);
ctx.lineTo(60,65);
ctx.lineTo(90,65);
ctx.moveTo(110,75);
ctx.lineTo(125,75);
ctx.stroke();
</script>
</body>
</html>
3.绘制弧线：
arc(x, y, radius, startAngle, endAngle, anticlockwise)：
x,y圆心，radius为半径，startAngle起始弧度，endAngle结束弧度，如anticlockwise为true表示逆时针，反之须时针。
注意：弧度是以弧度为单位而不是以角度为单位。
度和弧度直接的转换可以用这个表达式：var radians = (Math.PI/180)*degrees;。
例子：
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="300" height="300" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
< /canvas>
<script>
var c=document.getElementById("myCanvas"),
ctx=c.getContext("2d");
ctx.beginPath();
var x
= 150;
var y
= 150;
var radius
= 100;
var startAngle
= Math.PI;
var endAngle
= 0.5*Math.PI;
var anticlockwise =false;
ctx.arc(x,y,radius,startAngle,endAngle, anticlockwise);
ctx.stroke();
</script>
</body>
</html>
4.贝塞尔曲线：
quadraticCurveTo(cpX, cpY, x, y)：
quadraticCurveTo() 方法为当前的子路径添加一条贝塞尔曲线。这条曲线从当前点开始，到 (x,y) 结束。控制点 (cpX,cpY) 说明了这两个点之间的曲线的形状。
例子：
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="300" height="300" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
var c=document.getElementById("myCanvas"),
ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(75,25);
ctx.quadraticCurveTo(25,25,25,62.5);
ctx.quadraticCurveTo(25,100,50,100);
ctx.quadraticCurveTo(50,120,30,125);
ctx.quadraticCurveTo(60,120,65,100);
ctx.quadraticCurveTo(125,100,125,62.5);
ctx.quadraticCurveTo(125,25,75,25);
ctx.stroke();
</script>
</body>
</html>
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)：
相关文章
精彩导读
热门资讯
关注我们
