目录
一、什么是Canvas?
canvas就是画布,可以画线,图形,填充,客户管理系统开发定制图像绘制等操作。
canvas客户管理系统开发定制不仅提供简单的二维绘图,客户管理系统开发定制也提供三维绘图。
二、Canvas元素的定义(写在html文件的body中)
<canvas id=“myCanvas” width=200 height=100 >
.............
</canvas>
- id 是canvas元素的标识;
- height是canvas画布的高度,单位为像素;
- width是canvas画布的宽度,单位为像素。
三、使用JavaScript获取网页中的Canvas对象
获取对象的方法:document.getElementById(对象id)
获取canvas对象的2D绘图上下文:getContext(“2d”)
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>canvas</title>
- <style type="text/css">
- body {
- background-color: antiquewhite;
- }
-
- #canvas {
- background-color: bisque;
- margin-top: 100px;
- margin-left: 200px;
- }
- </style>
-
- </head>
- <body>
- <canvas id="canvas" width="1000" height="500">
- <script>
- var mycanvas = document.getElementById('canvas');
- var context = mycanvas.getContext(‘2d’);
- ....
- </script>
- </canvas>
- </body>
- </html>
如图:body颜色为浅,画布颜色为深,圆圈圈住的为画布的(0,0)像素
四、
(1)绘制直线
- 调用beginPath()方法,指示开始绘图路径: ctx.beginPath();
- 调用moveTo()方法将坐标移至直线起点: ctx.moveTo(x,y);
- 调用lineTo()方法绘制直线: ctx.lineTo(x,y);
- 调用stroke()方法,绘制图形的边界轮廓: ctx.stroke();
- 调用closePath()方法,指示闭合绘图路径: ctx.closePath();
注:x表示水平方向的像素点,y表示垂直方向的像素点,下图黑点用(x,y)表示成(4,3)
代码实例:
- <script>
- var mycanvas=document.getElementById("canvas");
- var ctx=mycanvas.getContext("2d");
- ctx.beginPath();
- ctx.moveTo(100,200);
- ctx.lineTo(400,200);
- ctx.lineTo(250,400);
- ctx.closePath();
- ctx.strokeStyle="#000000";
- ctx.stroke();
- </script>
效果如下图所示:
(2)绘制矩形
绘制矩形:rect(x,y,width,height);
绘制矩形边框:strokeRect(x, y, width, height);
绘制填充矩形:(x, y, width, height);
擦除指定矩形区域:clearRect(x, y, width, height);
- x:矩形左上角的X坐标;
- y:矩形左上角的y坐标;
- width:矩形的宽度;
- height:矩形的高度
代码实例:
- <script>
- var mycanvas=document.getElementById("canvas");
- var ctx=mycanvas.getContext("2d");
-
- //rect()函数调用
- ctx.beginPath();
- ctx.rect(20,20,100,50);
- ctx.stroke();
-
- //strokeRect()函数调用
- ctx.strokeRect(200,20,150,60);
-
- //fillRect()函数调用
- ctx.fillRect(400,20,150,60);
- </script>
效果如下图所示:
注:strokeRect()方法与rect()方法的区别在于调用strokeRect()方法时不需要使用beginPath()和stroke()即可绘图。
(3)绘制圆弧
arc(centerx,centery,radius,startAngle,endAngle,antiClockwise);
- centerx,centery 圆弧中心点坐标
- Radius 半径
- startAngle 起始弧度
- endAngle 终止弧度
- antiClockwise 是否按逆时针方向绘图, 是一个可选参数,默认为false(即顺时针方向绘图)
- 弧度 = 角度* ( Math.PI / 180 )
代码实例:
- <script>
- var mycanvas=document.getElementById("canvas");
- var ctx=mycanvas.getContext("2d");
- //arc()函数调用
- ctx.beginPath();
- ctx.arc(100,150,70,0,90*Math.PI/180,true);
- ctx.stroke();
- </script>
效果如下图所示:
注:起始弧度 到 终止弧度是顺时针计算的
(4)填充和描边
1.描边
strokeStyle指定描边颜色(三种颜色方式均可)
lineWidth指定描边宽度(像素为单位)
2.填充
fillStyle指定填充颜色(三种颜色方式均可)
代码实例:
- <script>
- var mycanvas = document.getElementById("canvas");
- var ctx = mycanvas.getContext("2d");
- ctx.moveTo(20, 20);
- ctx.lineTo(100, 100);
- ctx.lineTo(100, 0);
- ctx.strokeStyle = "#0000FF";
- ctx.stroke();
- ctx.beginPath();
- ctx.moveTo(120, 20);
- ctx.lineTo(200, 100);
- ctx.lineTo(200, 0);
- ctx.fillStyle = "pink";
- ctx.fill();
- </script>
效果如下图所示:
由于ctx.strokeStyle = "#0000FF";(蓝色),ctx.fillStyle = "pink";(粉色)所以边框颜色是蓝色,填充颜色为粉色。