百度T7 课程 canvas 学习 1
程序员文章站
2022-05-21 13:42:12
...
大凡一个事情，都是从低往高处走，所以我们从helloworld 走，一点点加深！
要是看不懂我的博客，就去
具体链接地址： Web全栈架构师-石川大神
反正我是学习的这套！
<script>
window.onload = function(){
var c1 = document.getElementById('c1')
var gd = c1.getContext('2d')
gd.moveTo(100,100)
gd.lineTo(200,100)
gd.strokeStyle= '#bfa'
gd.lineWidth=10
gd.stroke()
}
</script>
<style>
#c1{
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="c1" width="500" height="500"></canvas>
</body>结果很简单：
这是最简单的
要说两点：
1, canvas 的宽高不要在style 指定，因为它不会真正扩大画布！而是在原始基础上拉伸画布，为了让同学们能看清楚
一下代码变了一下：
<script>
window.onload = function(){
var c1 = document.getElementById('c1')
var gd = c1.getContext('2d')
gd.moveTo(100,100)
gd.lineTo(200,100)
gd.strokeStyle= '#bfa'
gd.lineWidth=10
gd.stroke()
}
</script>
<style>
#c1{
border: 1px solid black;
width: 500px;
height: 500px;
}
</style>
</head>
<body>
<canvas id="c1" ></canvas>
结果显示：
怎么样不可思议吧：
首先不给canvas 指定宽高，则 默认是300 * 150 ，你用style 指定 500 * 500
则划线时，线条的宽度也会跟着拉伸变宽！
原来是10px , 500/150 * 10 ==36px
就是说，style 时， 会拉伸，不会真正扩大canvas 面积！
而设置属性，就会真正扩大面积！
你们要理解的话，就三种情况，
- canvas 不设置宽高，有多宽
- 在属性设置 width=500 height =500 时的效果
- 在style 上设置属性的效果
以上三大效果你一对比就知道，以后只要在属性上设置就行了
结论简单，就是在属性上设置就这么简单，推理自己看上面
1, 画个三角形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas</title>
<script>
window.onload = function(){
var c1 = document.getElementById('c1')
var gd = c1.getContext('2d')
gd.moveTo(100,100)
gd.lineTo(200,100)
gd.lineTo(200,300)
gd.lineTo(100,100)
// gd.closePath();
gd.strokeStyle= '#bfa'
gd.lineWidth=10
gd.stroke()
}
</script>
<style>
#c1{
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="c1" width="500" height="500" ></canvas>
</body>
</html>
效果如下：
为啥没有缺角呢，因为闭合方式不对：
改为如下代码：
window.onload = function(){
var c1 = document.getElementById('c1')
var gd = c1.getContext('2d')
gd.moveTo(100,100)
gd.lineTo(200,100)
gd.lineTo(200,300)
// gd.lineTo(100,100)
gd.closePath();
gd.strokeStyle= '#bfa'
gd.lineWidth=10
gd.stroke()
}则显示效果：以下效果完全闭合！
closePath() 方法就是用来闭合操作的！
————————————————————————————————————————
下面我们去画三条平行线的操作！
window.onload = function(){
var c1 = document.getElementById('c1')
var gd = c1.getContext('2d')
gd.moveTo(100,100)
gd.lineTo(200,100)
gd.strokeStyle= '#bfa'
gd.stroke()
gd.moveTo(100,150)
gd.lineTo(200,150)
gd.strokeStyle='red'
gd.stroke()
gd.moveTo(100,250)
gd.lineTo(200,250)
gd.strokeStyle='blue'
gd.stroke()
}你以为下面会画出三条平行线，而且颜色不一样：
结果，
完全超乎了想像，是 因为啊，
底下两次设置，都会对上面的产生影响，此时会重新涂一个新的颜色，所以会导致上面的效果
为了解决这个问题：
window.onload = function(){
var c1 = document.getElementById('c1')
var gd = c1.getContext('2d')
gd.beginPath();
gd.moveTo(100,100)
gd.lineTo(200,100)
gd.strokeStyle= '#bfa'
gd.stroke()
gd.beginPath();
gd.moveTo(100,150)
gd.lineTo(200,150)
gd.strokeStyle='red'
gd.stroke()
gd.beginPath();
gd.moveTo(100,250)
gd.lineTo(200,250)
gd.strokeStyle='blue'
gd.stroke()
}效果就正常 了
你们有没有发现： 红色不太亮，那是因为 画的位置不对，你稍微加个小数点，就会变细变亮了！
gd.beginPath();
gd.moveTo(100,100.5)
gd.lineTo(200,100.5)
gd.strokeStyle= '#bfa'
gd.stroke()
gd.beginPath();
gd.moveTo(100,150.5)
gd.lineTo(200,150.5)
gd.strokeStyle='red'
gd.stroke()
gd.beginPath();
gd.moveTo(100,250)
gd.lineTo(200,250)
gd.strokeStyle='blue'
gd.stroke()显示：
行，先写这么多，回头我们继续前行！！