/*
ctx.moveTo(100,100);
ctx.lineTo(200,100);
ctx.stroke();
ctx.strokeStyle="blueviolet";
ctx.lineWidth=10;
ctx.beginPath();
ctx.closePath();
ctx.fill();
ctx.fillStyle="lightskyblue";
ctx.lineCap="round";
ctx.lineJoin="round";
ctx.setLineDash([5,10,15]);
ctx.DashOffset=-20;//往前偏移
ctx.rect(100,100,200,100);
//绘制矩形,不是独立路径
ctx.strokeRect(100,100,200,100);
ctx.fillRect(100,100,200,100);
ctx.clearRect(100,100,200,100);
//渐变色
var linearGradient=ctx.createLinearGradient(100,100,500,300);
linearGradient.addColorStop(0,'lightskyblue');
linearGradient.addColorStop(1,'blue');
*/
绘制平行线
<style>
canvas{
border:1px solid blueviolet;
}
</style>
</head>
<body>
<canvas width="600" height="400"></canvas>
<script>
var myCanvas=document.querySelector("canvas");
var ctx=myCanvas.getContext("2d");
//画平行线
ctx.moveTo(100,100);
ctx.lineTo(200,100);
ctx.moveTo(100,200);
ctx.lineTo(200,200);
//描边
ctx.stroke();
/* 关于线条的问题
1、默认的宽度是多少 1px
2、默认的颜色是什么 黑色
产生原因 对齐的点是线的中心位置 会把线分成两个0.5px 显示的是会不饱和和增加宽度
解决方案:前后移动0.5px*/
</script>
</body>
在填充时遵循非零环绕规则
为0时填充白色
和线相关的属性和方法
ctx.lineCap="butt";
ctx.lineJoin="miter";
ctx.lineCap="square";
ctx.lineJoin="bevel";
ctx.lineCap="round";
ctx.lineJoin="round";
绘制虚线
<script>
var myCanvas=document.querySelector("canvas");
var ctx=myCanvas.getContext("2d");
//画线
ctx.moveTo(100,100.5);
ctx.lineTo(300,100.5);
//[5,10]数组是用来描述你的排列方式的
ctx.setLineDash([5,10,15]);
//获取虚线的排列方式 获取的是不重复的那一段的排列方式
console.log(ctx.getLineDash());
//如果是正值 往后偏移
//如果是负值 往前偏移
ctx.lineDashOffset=-20;
ctx.stroke();
</script>