简介
-
canvas标签定义图形，比如图表，和其他图像。 -
canvas标签只是图形容器，必须使用脚本来绘制图形。 - canvas有两个方向的轴，x和y轴，（0,0）点默认为左上角
canvas常用一些属性和方法
width和height
canvas宽度和高度，都直接在标签上设置，如果在css样式中设置，显现出来的高度和宽度可能不是设置的。
canvas有默认用默认的宽度和高度，300px
<canvas id="canvas" width="500" height="500">您的浏览器不支持canvas请升级最新版本</canvas>
标签中的文字只有在浏览器不支持canvas时才会显示
getContext()
大多数canvas绘图API都没有定义在canvas元素本身上，而是定义在通过画布的getContext（）方法获得的一个“绘图环境”上。
var ctx = document.getElementById('canvas');
ctx.getContext('2d');
beginPath()
开始绘制
ctx.beginPath();
moveTo(x,y)
设置绘制的起点
有两个参数：参数1：x轴方向的数值；参数2：y轴方向的数值。
ctx.moveTo（0,0);
lineTo(x,y)
绘制后续的点,后续点可以有多个
有两个参数：参数1：x轴方向的数值；参数2:y轴方向的数值。
ctx.lineTo(250,250);
ctx.lineTo(500,0);
closePath()
关闭路径，把终点和起点连接起来；不需要把终点和起点连接时可以不写。
ctx.closePath();
stroke()，fill()
stroke描边
fill填充
改变边线的颜色
ctx.strokeStyle = 'red';
改变填充的颜色
ctx.fillStyle = 'green';
lineWidth
设置边线的宽度，宽度以边线为中心向两边平分
ctx.lineWidth = 5;
绘制矩形
使用stroke绘制矩形: ctx.storkeRect(x,y,w,h);
绘制有填充颜色的矩形：ctx.fillRect(x,y,w,h);
设置圆角
对线的尾部进行圆角设置（必须关闭closePath）
ctx.lineCap='round';
设置线的交汇处进行圆角处理
ctx.lineJoin='round';
绘制字体
设置字体大小和字体类型
ctx.font='50px 黑体';
绘制文字（文字默认是基线对齐）
设置水平对齐方式
ctx.textAline='right';
设置垂直对齐方式
ctx.textBaseline='bottom';
storkeText()绘制字体
ctx.strokeText('Hello,World',100,100);
fillText()绘制字体
ctx.fillText('Hello,World',100,300,100);
绘制圆
/*
参数1：圆心的x
参数2：圆心的y
参数3：圆的半径
参数4：起点的位置，根据右侧和设置的弧度制找到起点
参数5：终点的位置，根据右侧和设置的弧度制找到终点
参数6：绘制的方向，true代表逆时针，false代表顺时针
在这个里面的弧度用Math.PI表示。 Math.PI/2 代表90度；
设置度用 n*Math.PI/180 n为要设置的度数
*/
ctx.arc(250,250,200,Math.PI,Math.PI/2,false);
ctx.stroke();
绘制二次贝塞尔曲线和三次贝塞尔曲线
//绘制曲线(二次贝塞尔曲线)
//使用moveTo放置起点，
//使用quadraticCurveTo()放置基准点和终点
//参数1：基准点的x
//参数2：基准点的y
//参数3：终点的x
//参数4：终点的y
ctx.moveTo(0,0);
ctx.quadraticCurveTo(250,500,500,0);
ctx.stroke();
//绘制曲线(三次贝塞尔曲线)
//参数1: 基准点1的x
//参数2: 基准点1的y
//参数3: 基准点2的x
//参数4: 基准点2的y
//参数5: 终点点1的x
//参数6: 终点点1的y
ctx.moveTo(0,0);
ctx.bezierCurveTo(500,0,0,500,500,500);
ctx.stroke();
画图像img
//如果想把图像画到canvas中，需要先创建image对象
var img=new Image();
img.src='images/1.jpg';
img.onload=function (){
//必须等图片加载完成之后，才可以进行绘制
/*
参数：参数1：img;
参数2：x；
参数3：y；
参数4：宽度width；
参数5：高度height；
参数6：图片上的要显示的起点x；
参数7：图片上的要显示的起点y；
参数8：图片上以起点开始要显示的宽度width；
参数9：图片上以起点开始要显示的高度height；
*/
// ctx.drawImage(img,10,10);
// ctx.drawImage(img,10,10,200,200);
ctx.drawImage(img,10,10,200,200,100,100,200,200);
}
清除画布
画布的清除一般在做动画时使用
//清除画布
//四个参数：x,y,w,h
// ctx.clearRect(10,10,200,200);
坐标系移动
ctx.translate(x,y);
坐标系旋转
坐标系的旋转以（0,0）原点为中心
ctx.rotate(Math.PI/6);
简单示例：
时钟
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
background: #000;
}
canvas{
background: #fff;
}
</style>
</head>
<body>
<canvas id="cc" width="400px" height="400px"></canvas>
<script>
var cc = document.getElementById('cc');
var ctx = cc.getContext('2d');
function time(){
var x = 200;
var y = 200;
var r = 150;
var oDate = new Date();
var hours = oDate.getHours();
var minutes = oDate.getMinutes();
var seconds = oDate.getSeconds();
var hValue = (-90 + hours * 30 + minutes/2)*Math.PI/180;
var mValue = (-90 + minutes * 6)*Math.PI/180;
var sValue = (-90 + seconds * 6)*Math.PI/180;
ctx.beginPath();
for(var i=0; i<60 ; i++){
ctx.moveTo(x,y);
ctx.arc(x,y,r,6*i*Math.PI/180,6*(i+1)*Math.PI/180,false);
}
ctx.closePath();
ctx.stroke();
//盖圆盘
ctx.fillStyle = '#fff';
ctx.beginPath();
ctx.moveTo(x,y);
ctx.arc(x,y,r*18/20,0,Math.PI*2,false);
ctx.closePath();
ctx.fill();
//时
ctx.lineWidth = 3;
ctx.beginPath();
for(var i=0; i<12 ; i++){
ctx.moveTo(x,y);
ctx.arc(x,y,r,30*i*Math.PI/180,30*(i+1)*Math.PI/180,false);
}
ctx.closePath();
ctx.stroke();
//盖圆盘
ctx.fillStyle = '#fff';
ctx.beginPath();
ctx.moveTo(x,y);
ctx.arc(x,y,r*16/20,0,Math.PI*2,false);
ctx.closePath();
ctx.fill();
//时针
ctx.lineWidth = 5;
ctx.beginPath();
ctx.moveTo(x,y);
ctx.arc(x,y,r*8/20,hValue,hValue,false);
ctx.closePath();
ctx.stroke();
//分针
ctx.lineWidth = 3;
ctx.beginPath();
ctx.moveTo(x,y);
ctx.arc(x,y,r*14/20,mValue,mValue,false);
ctx.closePath();
ctx.stroke();
//秒针
ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(x,y);
ctx.arc(x,y,r*16/20,sValue,sValue,false);
ctx.closePath();
ctx.stroke();
}
setInterval(time,1000);
</script>
</body>
</html>
网友评论