一、基础介绍和画直线
大多数现代浏览器都是支持Canvas的,比如 Firefox, safari, chrome, opera的最近版本以及IE9都支持.IE8及以下不支持HTML5,但是我们可以进行提示用户更新到最新的版本。
在进行图形绘制时,我们是通过context绘图环境进行操作。context是canvas的核心。context字面意思是上下文,我们可以把它理解为绘图的助手,用于存储操作步骤。
Canvas坐标系：X轴:横向向右为正方向。Y轴:竖向向下为正方向。
<canvas id="myCanvas" width="500" height="500">你的浏览器不支持canvas，请使用高版本的浏览器。</canvas>
//获取canvas画布对象
var canvas=document.getElementById("myCanvas");
//创建上下文
var context=canvas.getContext("2d");
//画线
//创建一个图层
context.beginPath();
//移动画笔到指定位置
context.moveTo(0,0);
//画笔画到什么位置
context.lineTo(200,200);
context.lineTo(20,360);
//设置线条的颜色
context.strokeStyle="blueviolet";
//设置线条的粗细
context.lineWidth=10;
//设置线条的线帽，端点样式
//lineCap用于设置线条两端的形状
//butt（default） 默认，没有帽
//round 圆头
//square 方头,加上会增加一个线帽，长度是线条宽度的一半
context.lineCap="round";
//渲染，画图
context.stroke();
你画我猜的小练习
var canvas=document.getElementById("myCanvas");
var context=canvas.getContext("2d");
canvas.onmousedown=function(event) {
var ev=event||window.event;
var x=ev.clientX-canvas.offsetLeft;
var y=ev.clientY-canvas.offsetTop;
console.log(x, y)
context.beginPath();
context.moveTo(x, y)
canvas.onmousemove=function(event) {
var ev=event||window.event;
var Left=ev.clientX-canvas.offsetLeft;
var Top=ev.clientY-canvas.offsetTop;
context.lineTo(Left, Top);
context.stroke();
}
document.onmouseup=function() {
canvas.onmousemove=null;
}
}
二、封闭图形
var canvas=document.getElementById("myCanvas");
var context=canvas.getContext("2d");
context.beginPath();
context.moveTo(50,50);
context.lineTo(50,150);
context.lineTo(150,150);
//context.lineTo(50, 50);
//封闭图形
context.closePath();
//填充颜色
context.fillStyle="#6767BB";
//线的颜色
context.strokeStyle="#56FFCC";
//线的宽
context.lineWidth=5;
//渲染面
context.fill();
//渲染线，如果把context.stroke去掉，就没有边了，相当于线没有渲染
context.stroke();
三、画矩形的简单方式
var canvas=document.getElementById("myCanvas");
var context=canvas.getContext("2d");
context.beginPath();
//以线来画矩形，四个参数(x起点，y起点，矩形的宽，矩形的高),不需要渲染
context.strokeRect(50,50,200,200)；
//画填充的矩形，四个参数(x起点，y起点，矩形的宽，矩形的高),不需要渲染
context.fillRect(50,50,200,200)；
四、画圆
var canvas=document.getElementById("myCanvas");
var context=canvas.getContext("2d");
context.beginPath();
//第一个参数：圆心的x坐标
//第二个参数：圆心的y坐标
//第三个参数：半径
//第四个参数：开始画圆的开始角度
//第五个参数：结束的角度
//第六个参数：画圆的方向（顺时针false、逆时针true）
context.arc(200,200,180,0, Math.PI*2,true);
五、渐变色
var canvas=document.getElementById("myCanvas");
var context=canvas.getContext("2d");
context.beginPath();
context.arc(200,200,180,0, Math.PI*2,true);
//createLinearGradient(x, y, x1, y1) - 创建线条渐变
//第一个参数：开始渐变的x坐标，
//第二个参数：开始渐变的y坐标，
//第三个参数：结束渐变的x坐标
//第四个参数：结束渐变的y坐标
//createRadialGradient(x, y, r, x1, y1, r1) - 创建一个径向 / 圆渐变
var gradient=context.createLinearGradient(0,0,400,400);
//addColorStop()方法指定颜色停止， 参数使用坐标来描述， 可以是0至1
gradient.addColorStop(0,"red");
gradient.addColorStop(0.5,"yellow");
gradient.addColorStop(1,"green");
//addColorStop()可以添加无数个
//渲染
context.fillStyle=gradient;
context.lineWidth=10;
context.strokeStyle="deeppink"
context.stroke();
context.fill();
六、绘制文字
//strokeText(text,x,y) - 在 canvas 上绘制空心的文本
//fillText(text,x,y) - 在 canvas 上绘制实心的文本
//三个参数,第一个参数：文字内容.第二个参数：开始绘制文字的x坐标.第三个参数：开始绘制文字的y坐标
//font - 定义字体
var canvas=document.getElementById("myCanvas");
var context=canvas.getContext("2d");
context.beginPath();
//改变字体颜色
context.strokeStyle="orangered";
context.font="italic 50px Arial";//斜体 字体大小 字体样式
context.strokeText("hello world",100,100);//空心文本
context.fillStyle="red";
context.fillText("hello world",100,300);//实心文本
七、绘制阴影
var canvas=document.getElementById("myCanvas");
var context=canvas.getContext("2d");
context.beginPath();
//阴影的右偏移量(如果是负值就是左偏移量)
context.shadowOffsetX=10;
//阴影的下偏移量(如果是负值就是上偏移量)
context.shadowOffsetY=10;
//设置阴影颜色
context.shadowColor="blue";
//设置阴影的模糊程度，值越来越模糊
context.shadowBlur=10;
context.arc(200,200,100,0, Math.PI*2);
context.fillStyle="red";
context.fill();
八、平移
var canvas=document.getElementById("myCanvas");
var context=canvas.getContext("2d");
context.beginPath();
context.fillStyle="red";
//平移，平移的是画布的坐标系，想要产生效果需要先平移再画，
context.translate(100,100);
context.fillRect(0,50,100,100);
九、旋转
var canvas=document.getElementById("myCanvas");
var context=canvas.getContext("2d");
context.beginPath();
context.fillStyle="#7B68EE";
//是坐标系从原点旋转，旋转的是坐标系，正值顺时针旋转，负值逆时针旋转
context.rotate(Math.PI/4);
context.fillRect(200,0,50,50)；
十、缩放
var canvas=document.getElementById("myCanvas");
var context=canvas.getContext("2d");
context.beginPath();
context.fillStyle="#7B68EE";
//缩放：第一个值是x轴缩放的比例，第二个值是y轴缩放的比例
//缩放的是坐标系
context.scale(2,0.5);//x轴整体坐标放大两倍，y轴整体缩小0.5倍
context.fillRect(50,0,50,50)；
十一、储存和释放状态
context.save()储存状态，存储绘制状态
context.restore()释放状态，获取之前的画布状态
这两个是成对出现的，调用context.restore()之后将返回在context.save()这个节点时的canvas的所有的状态。这是保持canvas绘图状态的方法。在save和restore之间可以随意更改canvas的状态，而不会影响后续的绘制效果。当涉及到图形变换(平移，旋转，缩放)的时候，记得要先save，变换结束之后restore，以保证canvas图形绘制的正确。
如果有多个存档，是倒着取的
十二、二次曲线和三次曲线(贝塞尔曲线)
quadraticCurveTo(cpx,cpy,dx,dy);创建一条表示二次曲线的路径.(二次曲线其实就是二次方函数形成的曲线)。有四个参数。
//第一个参数：控制点的x坐标
//第二个参数：控制点的y坐标
//第三个参数：结束点的x坐标
//第四个参数：结束点的y坐标
控制点，决定曲线的形状。结束点代表终点。
bezierCurveTo(cpx,cpy,cpx2,cpx2,dx,dy);创建一条表示贝塞尔曲线的路径.该函数接受六个参数：
//第一二个参数是第一个控制点的x，y坐标
//第三四个参数是第二个控制点的x，y坐标
//第五六个参数是曲线结束的坐标
var canvas=document.getElementById("myCanvas");
var context=canvas.getContext("2d");
context.beginPath();
//二次曲线
context.moveTo(0,0);//起点
context.quadraticCurveTo(400,0,400,400);
context.stroke();
//三次曲线
context.moveTo(0,0);//起点
context.bezierCurveTo(400,0,400,100,400,400)
context.stroke();
十三、变换矩阵
//transform(a,b,c,d,e,f)
//a,d水平、垂直缩放
//b,c水平、垂直倾斜（可以取负值，负值的方向就是相对正值相反的方向）
//e,f水平、垂直位移
//默认是transform(1, 0, 0, 1, 0, 0)
//注意：使用transform设置变换矩阵是在之前的变换的基础上进行变换设置的，也就是说transform设置的变换矩阵具有集联的关系，
//setTransform(a,b,c,d,e,f)就是忽略之前的设置,将会让之前所有的设置失效，只使用当前的setTransform中传入的变换矩阵
context.fillStyle="red";
context.strokeStyle="#058";
context.lineWidth=5;
context.save();
context.transform(2,0.2,0.2,1.5,50,100);
context.fillRect(50,50,300,300);
context.strokeRect(50,50,300,300);
context.restore();
网友评论