canvas绘图基础

来源：互联网发布：合同软件编辑：程序博客网时间：2024/05/17 04:43

canvas使用场景

动画、h5游戏、图表

chart.js是使用canvas实现的一个做图表的库

phaser是使用canvas实现的做游戏的库

canvas坐标体系

关于画布大小的坑画布默认大小为300*150

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>canvas</title>    <style type="text/css">        .canvas{            border: 1px solid red;            width: 100px;            height: 100px;        }    </style></head><body><!--在css中设置画布的宽高会出问题 这是个坑  当然也可以使用canvas.width /height方式--><canvas id="myCanvas" class="canvas">    您的浏览器不支持canvas</canvas><canvas id="myCanvas2" class="canvas">    您的浏览器不支持canvas</canvas><script type="text/javascript">    var canvas = document.getElementById('myCanvas');    canvas.width = 100;//通过css样式控制的大小会有缩放    canvas.height = 100;    var ctx = canvas.getContext('2d');    ctx.moveTo(0, 0);    ctx.lineTo(100 , 100);    ctx.stroke();    var canvas2 = document.getElementById('myCanvas2');    canvas2.width = 200;//这里才是画布大小    canvas2.height = 200;    var ctx2 = canvas2.getContext('2d');    ctx2.moveTo(0, 0);    ctx2.lineTo(200 , 200);    ctx2.stroke();</script></body></html>

结果如下

很明显左边的图被拉伸了有模糊的地方

lineto只是将路径存在内存中

stroke绘制

beginpath会将之前存在内存的路径清空

closepath会自动连接起始点和末尾点

绘制圆

ctx.beginPath();ctx.arc(300 ,300, 50,0 ,2 * Math.PI);//圆心坐标 半径 起始弧度 到终点弧度ctx.strokeStyle ="000";ctx.stroke();

绘制矩形

//矩形ctx.strokeRect(300,100,200,100)

平移、旋转、缩放

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body><canvas id="myCanvas" width="600px" height="400px"></canvas><script type="text/javascript">    var canvas = document.getElementById("myCanvas");    var ctx = canvas.getContext("2d");    //平移的是坐标系的原点 要放在前面    ctx.moveTo(0 , 0);    ctx.lineTo(100, 100);    ctx.stroke();    ctx.translate(0 , 100);    ctx.beginPath();    ctx.moveTo(0 , 0);    ctx.lineTo(100, 100);    ctx.stroke();    //旋转    ctx.rotate(Math.PI / 4);    ctx.beginPath();    ctx.moveTo(0 , 0);    ctx.lineTo(100, 100);    ctx.strokeStyle = "red";    ctx.stroke();    //缩放    ctx.scale(1, 0.5);    ctx.fillRect(0, -100, 100, 100);</script></body></html>

但是以上方法不常用

save 和restore 总是成对出现

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body><canvas id="myCanvas" width="600px" height="400px"></canvas><script type="text/javascript">    var canvas = document.getElementById("myCanvas");    var ctx = canvas.getContext("2d");    ctx.save();    //平移的是坐标系的原点 要放在前面    ctx.moveTo(0 , 0);    ctx.lineTo(100, 100);    ctx.stroke();    ctx.translate(0 , 100);    ctx.beginPath();    ctx.moveTo(0 , 0);    ctx.lineTo(100, 100);    ctx.stroke();    //旋转    ctx.rotate(Math.PI / 4);    ctx.beginPath();    ctx.moveTo(0 , 0);    ctx.lineTo(100, 100);    ctx.strokeStyle = "red";    ctx.stroke();    //缩放    ctx.scale(1, 0.5);    ctx.fillRect(0, -100, 100, 100);//恢复至save的状态    ctx.restore();    ctx.beginPath();    ctx.moveTo(200,200);    ctx.lineTo(300,300);    ctx.stroke();</script></body></html>

渐变

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body><canvas id="myCanvas" width="600px" height="400px"></canvas><script type="text/javascript">    var canvas = document.getElementById("myCanvas");    var ctx = canvas.getContext("2d");    //线性渐变    //                  第一个点的x,y坐标 第二个点的  var linearGradient =  ctx.createLinearGradient(50,50, 150,150);    linearGradient.addColorStop(0,'rgb(255,0,0)');    linearGradient.addColorStop(1,'rgb(0,0,255)');//百分百位置的颜色    ctx.fillStyle = linearGradient;    ctx.fillRect(0,0,200,200);//径向渐变                   第一个圆的坐标加半径  第二个的   var radialGradient = ctx.createRadialGradient(400,150 ,0 , 400 ,150 ,100)    radialGradient.addColorStop(0,'rgb(255,0,0)');   radialGradient.addColorStop(1,'rgb(0,0,255)');   ctx.fillStyle = radialGradient;   ctx.beginPath();   ctx.arc(400,150,100,0,Math.PI * 2);   ctx.fill();</script></body></html>

文字

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body><canvas id="myCanvas" width="600px" height="400px"></canvas><script type="text/javascript">    var canvas = document.getElementById("myCanvas");    var ctx = canvas.getContext("2d");    var str = "hello world";    ctx.font = "50px sans-serif";    ctx.textAlign = "center";    ctx.textBaseline = "top";    ctx.fillText(str, 300,0); //文字  坐标    ctx.strokeText(str,0 ,200);    var width = ctx.measureText(str).width;//计算文本的宽度    console.log(width);    //文本高度 canvas没有直接的方法</script></body></html>

阅读全文

0 0