canvas的基本使用
其实就是一块画布
canvas标签
canvas标签: 宽高的属性必须设置在标签中, 而不是css样式中(包括行间样式)
<canvas id="cc" width="500px" height="500px"></canvas>
通过标签获取画布
canvas是标签,画布是canvas的一个属性
绘制之前都需要通过标签获取到画布,再通过画布来调用 绘制的方法
画布:canvas绘制的上下文
var ig = cc.getContext("2d");
绘制直线的流程
- 开始绘制(落笔)
ig.beginPath();
- 保存当前样式
ig.save();
- 设置起点
ig.moveTo(10,10)
- 设置终点
终点可以设置多个
ig.lineTo(100,100)
ig.lineTo(90,50)
ig.lineTo(110,40)
- 闭合路径 (抬笔)
可选,根据需求 最后一个点和起点相连接
ig.closePath();
- 根据设置的点,来连接
设置连接线的样式
ig.lineWidth = 8;//设置线宽
ig.strokeStyle = "#F25807";// 设置连接线的颜色
ig.stroke();
- 加载保存过的样式
ig.restore();
画第二笔
ig.beginPath()
ig.moveTo(150,100);
ig.lineTo(250,100);
ig.lineTo(250,200);
ig.lineTo(150,200);
ig.lineWidth = 5;//设置线宽
ig.lineJoin = "round"; // 设置两条线交接点的样式
ig.strokeStyle = "#FF00B7";
ig.closePath();
ig.stroke();// 抬笔
空心的矩形
ig.strokeRect(300,150,100,100);
实心矩形
ig.fillStyle = "blue";
ig.fillRect(300,30,100,100);
清除矩形
ig.clearRect(325,55,50,50);
空心字
ig.font = "50px 楷体";
ig.strokeStyle = "orange";
ig.strokeText("小小涛",310,200);
实心字
ig.fillText("大大涛",10,300);
渐变
var cc = document.getElementById("cc");
var ig = cc.getContext("2d");
var col = ig.createLinearGradient(10,10,170,10);
col.addColorStop(0,"pink");
col.addColorStop(1,"purple");
ig.fillStyle = col;
ig.fillRect(10,10,200,20);
画圆
arc: 画圆
参数:
- 在canvas中 x轴上的位置
- 。。。。。 y轴上的位置
- 半径
- 开始角度 Math.PI 约等于 180°
- 结束角度
- 是否逆时针绘制 可选参数 默认 顺时针
var cc = document.getElementsByClassName("myCanvas")[0];
var ctx = cc.getContext("2d");
ctx.arc(150,100,100,0*Math.PI,Math.PI/180*180);
ctx.strokeStyle = "green";
ctx.lineWidth = 1;
ctx.closePath();
ctx.fillStyle = "red";
ctx.fill();
ctx.stroke();
canvas动画 - 时钟
详细的代码在资源中