canvas基础—01绘制路径

最新推荐文章于 2024-02-26 17:38:35 发布

jiaojsun

最新推荐文章于 2024-02-26 17:38:35 发布

阅读量260

点赞数

分类专栏： canvas基础

本文链接：https://blog.csdn.net/jiaojsun/article/details/87013963

版权

canvas基础专栏收录该内容

12 篇文章 1 订阅

订阅专栏

1.标签、绘制环境、绘制方块、设置绘图

绘制方块

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>canvas学习</title>
<style>
body{background: black}
#c1{background: white}
span{color: white}
</style> 
<script type="text/javascript">
    window.onload = function(){
        var oC = document.getElementById('c1');
        var oGC = oC.getContext('2d');//webgl:3D绘图
        //绘制矩形 (left top width height) 原点在左上角 向下向右为正方向
        // oGC.fillRect(50,50,100,100);

        // 带边框的矩形  默认边框是1px
        // oGC.strokeRect(50,50,100,100);

        // 设置绘图
        oGC.fillStyle = 'red'; // 填充是红色
        oGC.strokeStyle = 'blue'; //线的颜色是蓝色
        oGC.lineWidth = 10;  //线条宽度是10
        oGC.fillRect(50,50,100,100);
        oGC.strokeRect(50.5,50.5,100,100);
    }

</script>
</head>
<body>

<canvas id="c1" width="400" height="400">
	<span>不支持canvas浏览器</span>
</canvas>

</body>
</html>

2.边界绘制、绘制路径

边界连接点样式

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>canvas学习</title>
<style>
body{background: black}
#c1{background: white}
span{color: white}
</style> 
<script type="text/javascript">
    window.onload = function(){
        var oC = document.getElementById('c1');
        var oGC = oC.getContext('2d');//webgl:3D绘图

        // 设置绘图
        oGC.fillStyle = 'red'; // 填充是红色
        oGC.strokeStyle = 'blue'; //线的颜色是蓝色
        oGC.lineWidth = 10;  //线条宽度是10
        oGC.lineJoin = 'round' //边界连接点样式 圆角
        oGC.fillRect(50,50,100,100);
        oGC.strokeRect(50.5,50.5,100,100);
    }

</script>
</head>
<body>

<canvas id="c1" width="400" height="400">
	<span>不支持canvas浏览器</span>
</canvas>

</body>
</html>

绘制三角形

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>canvas学习</title>
<style>
body{background: black}
#c1{background: white}
span{color: white}
</style> 
<script type="text/javascript">
    window.onload = function(){
        var oC = document.getElementById('c1');
        var oGC = oC.getContext('2d');//webgl:3D绘图
        // 绘制路径
        oGC.beginPath()     //开始绘制
        oGC.moveTo(100,100) //移动到初始的目标点（100,100）
        oGC.lineTo(200,200) //移动到目标点（100,100）
        oGC.lineTo(300,200) //移动到目标点（300,200）
        oGC.closePath()     //连接初始点和最后一个绘制的点
        oGC.stroke()        //从初始点到结束点绘制
    }

</script>
</head>
<body>

<canvas id="c1" width="400" height="400">
	<span>不支持canvas浏览器</span>
</canvas>

</body>
</html>

3.绘制路径

绘制两个不同的三角形

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>canvas学习</title>
<style>
body{background: black}
#c1{background: white}
span{color: white}
</style> 
<script type="text/javascript">
    window.onload = function(){
        var oC = document.getElementById('c1');
        var oGC = oC.getContext('2d');//webgl:3D绘图
        // 绘制路径 开始绘制(将每个绘制进行一个明确的区分用beginPath和stroke。fill等)
        oGC.beginPath()     //开始绘制
        oGC.moveTo(100,100) //移动到初始的目标点（100,100）
        oGC.lineTo(200,200) //移动到目标点（100,100）
        oGC.lineTo(300,200) //移动到目标点（300,200）
        oGC.closePath()     //连接初始点和最后一个绘制的点
        oGC.stroke()        //绘制结束
        // 绘制路径
        oGC.beginPath()     //开始绘制
        oGC.moveTo(100,200) //移动到初始的目标点（100,100）
        oGC.lineTo(200,300) //移动到目标点（100,100）
        oGC.lineTo(300,300) //移动到目标点（300,200）
        oGC.closePath()     //连接初始点和最后一个绘制的点
        oGC.fill()        //填充以上路径
    }

</script>
</head>
<body>

<canvas id="c1" width="400" height="400">
	<span>不支持canvas浏览器</span>
</canvas>

</body>
</html>

绘制矩形 rect()

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>canvas学习</title>
<style>
body{background: black}
#c1{background: white}
span{color: white}
</style> 
<script type="text/javascript">
    window.onload = function(){
        var oC = document.getElementById('c1');
        var oGC = oC.getContext('2d');//webgl:3D绘图
        // 绘制路径 开始绘制(将每个绘制进行一个明确的区分用beginPath和stroke。fill等)
        oGC.beginPath()     //开始绘制
        oGC.rect(100,100,100,100)          //绘制矩形（X,Y,W,H）
        oGC.closePath()     //连接初始点和最后一个绘制的点
        oGC.stroke()        //绘制结束（必须写）or  fill()
    }
</script>
</head>
<body>

<canvas id="c1" width="400" height="400">
	<span>不支持canvas浏览器</span>
</canvas>

</body>
</html>

删除画布区域 clearRect()

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>canvas学习</title>
<style>
body{background: black}
#c1{background: white}
span{color: white}
</style> 
<script type="text/javascript">
    window.onload = function(){
        var oC = document.getElementById('c1');
        var oGC = oC.getContext('2d');//webgl:3D绘图
        // 绘制路径 开始绘制(将每个绘制进行一个明确的区分用beginPath和stroke。fill等)
        oGC.beginPath()     //开始绘制
        oGC.rect(100,100,100,100)          //绘制矩形（X,Y,W,H）
        oGC.closePath()     //连接初始点和最后一个绘制的点
        oGC.stroke()        //绘制结束（必须写）or  fill()
        oGC.clearRect(0,0,oC.width,oC.height) //(X,Y,W,H)删除一个画布的矩形区域,这里删除整个canvas画布，用于运动的物体
    }
</script>
</head>
<body>

<canvas id="c1" width="400" height="400">
	<span>不支持canvas浏览器</span>
</canvas>

</body>
</html>

作用于局部 save(),restore()

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>canvas学习</title>
<style>
body{background: black}
#c1{background: white}
span{color: white}
</style> 
<script type="text/javascript">
    window.onload = function(){
        var oC = document.getElementById('c1');
        var oGC = oC.getContext('2d');//webgl:3D绘图
        // 绘制路径1 开始绘制(将每个绘制进行一个明确的区分用beginPath和stroke。fill等)
        oGC.save()  //将oGC.fillStyle = 'red'封闭起来,不至于影响下面的三角形
        oGC.fillStyle = 'red' 
        oGC.beginPath()     //开始绘制
        oGC.moveTo(100,100) //移动到初始的目标点（100,100）
        oGC.lineTo(200,200) //移动到目标点（100,100）
        oGC.lineTo(300,200) //移动到目标点（300,200）
        oGC.closePath()     //连接初始点和最后一个绘制的点
        oGC.fill()        //绘制结束
        oGC.restore()   //将oGC.fillStyle = 'red'封闭起来,不至于影响下面的三角形
        // 绘制路径2
        oGC.beginPath()     //开始绘制
        oGC.moveTo(100,200) //移动到初始的目标点（100,100）
        oGC.lineTo(200,300) //移动到目标点（100,100）
        oGC.lineTo(300,300) //移动到目标点（300,200）
        oGC.closePath()     //连接初始点和最后一个绘制的点
        oGC.fill()        //填充以上路径
    }

</script>
</head>
<body>

<canvas id="c1" width="400" height="400">
	<span>不支持canvas浏览器</span>
</canvas>

</body>
</html>

端点样式lineCap

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>canvas学习</title>
<style>
body{background: black}
#c1{background: white}
span{color: white}
</style> 
<script type="text/javascript">
    window.onload = function(){
        var oC = document.getElementById('c1');
        var oGC = oC.getContext('2d');//webgl:3D绘图
        // 绘制路径
        oGC.lineWidth=20
        oGC.lineCap='round'
        oGC.moveTo(100,100) //移动到初始的目标点（100,100）
        oGC.lineTo(200,200) //移动到目标点（100,100）
        oGC.stroke()        //绘制结束
    }

</script>
</head>
<body>

<canvas id="c1" width="400" height="400">
	<span>不支持canvas浏览器</span>
</canvas>

</body>
</html>