注意:
1.画布是不带单位的,以像素为计量
2.定义画布的宽高需要在行内设置,如果在CSS中设置,画布大小会变化,容易变形
3. 描线ctx.stroke(); 画完记得描线啊,不然不会出现
4.分清方法与属性
比如ctx.font = '32px 微软雅黑';正确
ctx.font('32px 微软雅黑');错误
步骤:
画布的使用分为五步:
1、获取画布
2、获取画笔
3、确定起始点
4、确定终点
5、描边
<!-- 注意: -->
<!--
1.画布是不带单位的,以像素为计量
2.定义画布的宽高需要在行内设置,如果在CSS中设置,画布大小会变化,容易变形
3. ctx.stroke(); 画完记得描线啊,不然不会出现
4.分清方法与属性
比如ctx.font = '32px 微软雅黑';正确
ctx.font('32px 微软雅黑');错误
-->
<!-- 步骤: -->
<!-- 画布的使用分为五部:
1、获取画布
2、获取画笔
3、确定起始点
4、确定终点
5、描边 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
canvas{
border: 1px solid red;
}
</style>
</head>
<body>
<!-- 一般都是在行内写,不然的话,画笔不好控制 所以要写到行内,即固定画布大小-->
<canvas id="cans" width="888" height="888">浏览器不支持</canvas>
<script>
//1.拿到画布
var cans = document.getElementById('cans');
//2.拿到画笔对象
var ctx = cans.getContext('2d');
console.log(ctx);
// 3.开始作画
// 前两个是坐标,后两个是宽高
ctx.fillRect(100,100,100,100);
// cans.fill();
// 正三角形
ctx.moveTo(150,0);
ctx.lineTo(0,300);
ctx.lineTo(300,300);
ctx.lineTo(150,0);
ctx.lineWidth=6;
// 菱形(正方形)
ctx.lineTo(0,150);
ctx.lineTo(150,300);
ctx.lineTo(300,150);
ctx.lineTo(150,0);
ctx.stroke();
// 重置路径,即提笔操作
ctx.beginPath();
ctx.moveTo(88,88);
ctx.lineWidth=9;
ctx.strokeStyle = 'aqua';
ctx.lineTo(99,99);
// 描线
ctx.stroke();
// 画圆
ctx.beginPath();
ctx.lineWidth=6;
ctx.strokeStyle='blue';
// x,y,r,开始角,结束角,顺时针与逆时针
ctx.arc(300,300,80,0,2*Math.PI/4,true);
//填充
ctx.fill();
ctx.stroke();
//添加一个渐变
//参数是有渐变色的x,y区域
var grd = ctx.createLinearGradient(666,666,888,888);
grd.addColorStop(0,'red');
grd.addColorStop(0.2,'green');
grd.addColorStop(0.5,'blue');
grd.addColorStop(1,'yellow');
ctx.beginPath();
ctx.font = '32px 微软雅黑';
ctx.fillStyle = grd;
ctx.strokeStyle=grd;
ctx.fillText("昌吉学院",666,666);
ctx.strokeText('飞剑问道',698,698);
</script>
</body>
</html>