canvas 画布
标签： web前端
直接上代码叨叨
<canvas id="canvas" width="500" height="500">您的浏览器不支持canvas请点此升级</canvas>
注意 ： canvas的宽高只能在标签上设置，千万不要在css中设置，不是不能设置而是设置的值不是你所设置的。
- 首先写个简单的三角形
<script>
var canvas = document.getElementById('canvas');
// 画笔
var ctx = canvas.getContext('2d');
// 开始绘制
ctx.beginPath();
// 开始绘制
ctx.moveTo(0,0);
// 绘制后续的点
ctx.lineTo(250,250);
ctx.lineTo(500,0);
// closePath（）也叫关闭路径，会把终点和起点连接起来，进行绘制；当需要终点和起点连接，才使用closePath
ctx.closePath();
//画（填）
//设置颜色
ctx.strokeStyle='blue';
//设置线的宽度（宽度是中间向两边评分的）
ctx.lineWidth=50;
</script>
- 填充ctx.fill();
设置填充颜色是：ctx.fillStyle = 'red';
-
绘制矩形: 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';// 设置垂直对齐方式
// ctx.strokeText('Hello,World',100,100);
// 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);
- 坐标系旋转
ctx.rotate(Math.PI/6);
下面是用canvas写的一个时钟，（为了便于理解 写的有点low）
<!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>
网友评论