canvas画布
画图和图片实现技术:
- 图片
- FLASH
- SVG
- canvas
canvas
canvas是:HTML提供的一个用于展示绘图效果的标签,愿以画布,在HTML页面中用于展示绘图效果。
canvas基本用法:
<canvas>您的浏览器不支持,请更换浏览器</canvas>
- 不要使用css样式设置宽高,应该使用HTML属性。如果使用css样式给canvas设置尺寸,会有拉伸效果
- canvas默认宽高为:300和150。
基本的绘图步骤:
- 获得canvas画布对象
- 调用getContext(type)方法(type取值webgl代表获取三维绘图工具;取值如果是2d代表二维绘图工具)
- 基本绘图命令
设置绘图起点 对象.moveTo(x,y)
设置直线到的位置 对象.lineTo(x,y)
描边绘制 对象.stroke()
填充绘制 对象.fill()
闭合路径 对象.closePath()
绘制各种图形:
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<canvas id="mycanvas" width="800" height="600">您的浏览器不支持,请更换浏览器</canvas>
<script>
var mycanvas=document.getElementById('mycanvas');
//获取上下文
var ctx=mycanvas.getContext('2d');
//矩形 参数1 x轴坐标 参数2 y轴坐标 参数3宽 参数4高
ctx.rect(50,50,100,100);
//边框颜色
ctx.strokeStyle=grd;
//边框
ctx.stroke();
//路径初始化 不初始化边框颜色可能继承
ctx.beginPath();
ctx.rect(200,50,100,100);
//边框颜色
ctx.strokeStyle='red';
//边框
ctx.stroke();
ctx.beginPath();
//设置路径开始点
ctx.moveTo(350,50);
//从之前的点画在这里
ctx.lineTo(450,50);
ctx.lineTo(450,150);
ctx.lineTo(350,150);
ctx.lineTo(350,50);
//设置线条宽度
ctx.lineWidth=4;
ctx.stroke();
//画三角形
ctx.beginPath();
ctx.moveTo(600,50);
ctx.lineTo(670,150);
ctx.lineTo(530,150);
// ctx.lineTo(600,50);
//直接画到原来的点路径没有闭合
//闭合路径
ctx.lineWidth=10;
ctx.closePath();
ctx.stroke();
//画圆形
ctx.beginPath();
//圆形 弧 参数:中心点 x,中心点 y 半径 r 起始弧度 结束弧度
ctx.arc(100,300,80,0,2*Math.PI);
ctx.fillStyle='yellow';
ctx.fill();
//弧度
ctx.beginPath();
//圆形 弧 参数:中心点 x,中心点 y 半径 r 起始弧度 结束弧度 顺时针连(默认)false/逆时针true
ctx.arc(300,300,80,2*Math.PI,Math.PI/2,true);
ctx.fillStyle='yellow';
ctx.fill();
//创建颜色 参数x 参数y 线性渐变
var grd=ctx.createLinearGradient(100,500,300,500);
grd.addColorStop(0,"black");
grd.addColorStop(0.3,"yellow");
grd.addColorStop(0.6,"blue");
grd.addColorStop(1,"green");
//绘制文字
//设置字体样式
ctx.lineWidth=3
//水平对齐
ctx.textAlign='center';
//垂直对齐
ctx.textBaseline='middle';
ctx.font='32px 微软雅黑';
ctx.fillStyle=grd;
ctx.strokeStyle=grd;
ctx.fillText('大家好',100,500);
//填充文字
ctx.strokeText('匿名好',300,500);
ctx.beginPath();
ctx.fillRect(100-2,500-2,4,4);
//椭圆
content.ellipse(300,300,100,100,Math.PI*2,0,Math.PI,true);
content.fill();
//画弧线
content.moveTo(20,20);//创建起始点
content.lineTo(100,20);//创建水平线
content.arcTo(150,20,150,70,50);//创建弧
content.lineTo(150,130);//创建垂直线
content.stroke();
</script>
</body>
</html>
多边形的绘制:
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<canvas width="600" height="400" id="mycanvas"></canvas>
<script>
var mycanvas=document.getElementById('mycanvas');
var ctx=mycanvas.getContext('2d');
//设置画布中心点
ctx.translate(mycanvas.width/2,mycanvas.height/2);
//旋转画布
//ctx.rotate(Math.PI/6);
//正三角形
ctx.beginPath();
ctx.moveTo(0,-100);
//旋转一圈2π 选择1/3;
ctx.rotate(2*Math.PI/3);
ctx.lineTo(0,-100);
ctx.rotate(2*Math.PI/3);
ctx.lineTo(0,-100);
ctx.closePath();
ctx.lineWidth=4;
ctx.stroke();
//正五边形
function draw(n) {
//保存绘画环境
ctx.save();
ctx.beginPath();
ctx.moveTo(0, -100);
for(var i=0;i<n;i++){
ctx.rotate(2*Math.PI/n);
ctx.lineTo(0,-100);
}
/*
ctx.rotate(2*Math.PI/5);
ctx.lineTo(0,-100);
ctx.rotate(2*Math.PI/5);
ctx.lineTo(0,-100);
ctx.rotate(2*Math.PI/5);
ctx.lineTo(0,-100);
ctx.rotate(2*Math.PI/5);
ctx.lineTo(0,-100);*/
ctx.closePath();
ctx.stroke();
//还原绘画环境
ctx.restore();
}
ctx.lineWidth=4;
draw(5)
</script>
</body>
</html>
canvas动画:
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
canvas{
border: 1px solid #cccccc;
}
</style>
</head>
<body>
<canvas id="mycanvas" width="800" height="600">您的浏览器不支持,请更换浏览器</canvas>
<script>
var mycanvas=document.getElementById('mycanvas');
var ctx=mycanvas.getContext('2d');
ctx.fillStyle='green';
var x=55;
setInterval(function(){
//清楚画布
ctx.clearRect(0,0,mycanvas.width,mycanvas.height);
ctx.fillRect(x,50,50,50);
x++;
},1000/30);
//1秒走30次 多少帧
(function run(){
ctx.clearRect(0,0,mycanvas.width,mycanvas.height);
ctx.fillRect(x,150,50,50);
x+=2;
//告诉浏览器要执行一个动画函数
requestAnimationFrame(run)
})();
//比较定时器 和动画函数
</script>
</body>
</html>