Canvas基础图形绘制

周大胖子 · 发表于 2018-12-12 23:38:12

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>canvas画图</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
.canvasBox{
border:1px solid #000;
}
</style>
</head>
<body>
<canvas class="canvasBox" id="canvas" width="600" height="400"></canvas>
<br />
测试项目
<script>
var myCanvas = document.getElementById('canvas');
var ctx = myCanvas.getContext("2d");
// 填充一个矩形
ctx.fillStyle="rgba(200,0,0)";
ctx.fillRect(50, 50, 80, 10);
// 绘制一个矩形
ctx.strokeRect(100, 100, 30, 10);
// 清除一个矩形 == 实际使用中，通常都是清空整个canvas 绘画下一侦的内容
// ctx.clearRect(0, 0, 600, 400)
// 1、建立启点【使用路径绘图第一步】
// ctx.beginPath();
// 2、使用画图命令画出路径
// ctx.stroke();
// 3、之后把路径闭合
// ctx.closePath();
// 4、一旦路径生成就可以使用描边或者填充路径区域来渲染图形
// fill();
ctx.beginPath();
ctx.moveTo(400,100);
ctx.lineTo(300,200);
ctx.lineTo(340,260);
ctx.closePath(); //若我先闭合则给我描出个三角形，若先描再闭合就少一条
ctx.stroke(); //描边没有这个就全是透明滴空的
ctx.beginPath();
ctx.moveTo(200,100);
ctx.lineTo(330,250);
ctx.lineTo(340,290);
ctx.fillStyle="rgba(30,30,30)"; //若我在这没有设置则这个填充颜色就是离最近fillstyle
ctx.fill()
// 笑脸圆形与弧形的绘制
ctx.beginPath();
ctx.arc(75,75,50,0,Math.PI*2,true);
ctx.moveTo(110,75);
ctx.arc(75,75,35,0,Math.PI,false);
ctx.moveTo(65,65);
ctx.arc(60,65,5,0,Math.PI*2,true); // 左眼
ctx.moveTo(95,65);
ctx.arc(90,65,5,0,Math.PI*2,true); // 右眼
ctx.stroke();
// 画个弧度线试试
ctx.beginPath();
ctx.moveTo(300,200)
ctx.arcTo(200,200,50,50,70); //参数解析前两个是第一个圆的坐标，中间是第二个圆形的坐标，最后是直径
ctx.stroke();
// 贝塞尔曲线，了解为主
// 二次贝塞尔曲线
ctx.beginPath();
ctx.moveTo(75,25);
ctx.quadraticCurveTo(25,25,25,62.5);
ctx.quadraticCurveTo(25,100,50,100);
ctx.quadraticCurveTo(50,120,30,125);
ctx.quadraticCurveTo(60,120,65,100);
ctx.quadraticCurveTo(125,100,125,62.5);
ctx.quadraticCurveTo(125,25,75,25);
ctx.stroke();
// 绘制矩形的额外方法
ctx.rect(330, 330, 200, 100)
ctx.stroke()
</script>
</body>
</html>

复制代码

基础知识记录：

// 不同于SVG，HTML中的元素canvas只支持一种原生的图形绘制：矩形。
//
//
// 每次设定beginPath();后都要专门设定起始位置  ctx.moveTo(x,y);
// 注意了  可以使用moveTo()绘制一些不连续的路径，就是说即使我不使用beginPath(),我依旧可以重新做一个起点画一个不连续的图
//
//
// 绘制直线使用 lineto(x,y);
// 绘制圆形：  arc(x,y,radius,startAngle,endAngle,anticlockwise) ; 注意这是开始的弧度而不是角度
//    弧度=(Math.PI/180)*角度。 anticlockwise 给定的方向，默认是顺时针  值为 true,false
//
//
//
// 当调用fill() 时所有没有闭合的形状都会自动闭合，不需要调用closePath();
//
//
// Path2D对象：用来缓存或者记录绘画命令；

周大胖子 · 发表于 2018-12-12 23:48:37

// 1、建立启点【使用路径绘图第一步】
//    ctx.beginPath();
// 2、使用画图命令画出路径
//    ctx.stroke();
// 3、之后把路径闭合
//    ctx.closePath();
// 4、一旦路径生成就可以使用描边或者填充路径区域来渲染图形
//       fill();