canvas基础1
系列文章目录
本文开始是canvas，通俗易懂，小白也没烦恼，根据慕课网liuyubobobo老师的视频课学习整理
视频课指路：慕课网 liuyubobobo老师 炫丽的倒计时效果Canvas绘图与动画基础
文章目录
- 系列文章目录
- 1、声明标签
- 2、画一条直线
- 3、线条组成的图形 - 画一个三角形
- 4、多边形填充加描边
- 5、定义两个形状
- 6、七巧板demo例子
- 7、绘制正方形demo
- 总结
1、声明标签
- 宽高在标签上
<canvas id="canvas" width="1024" height="768"style="background-color: rgb(200,200,200);display: block;margin: 20px auto;"
>当前浏览器不支持canvas，请更换浏览器后再试
</canvas>
- 宽高在js中设置
<canvas id="canvas" style="background-color: rgb(200,200,200);display: block;margin: 20px auto;">当前浏览器不支持canvas，请更换浏览器后再试
</canvas>
window.onload = function () {// 获取var canvas = document.getElementById('canvas')canvas.width = 1024canvas.height = 768// 判断该浏览器是否可以使用canvasif (canvas.getContext('2d')) {// 使用2d绘图var context = canvas.getContext('2d')// 使用context绘制} else {alert('当前浏览器不支持canvas，请更换浏览器后再试')}
}
2、画一条直线
-
canvas先设置状态最后绘制
-
画一条直线js代码
context.moveTo(x, y) 起点
context.lineTo(x, y) 终点
context.lineWidth = 5 线宽
context.strokeStyle = ‘#005588’ 线样式
context.stroke() 绘制
window.onload = function () {var canvas = document.getElementById('canvas')canvas.width = 1024canvas.height = 768if (canvas.getContext('2d')) {var context = canvas.getContext('2d')// 使用context绘制// 从坐标(100,100)为起点开始context.moveTo(100, 100)// 到坐标(700,700)为终点画一条直线context.lineTo(700, 700)// 线宽为5context.lineWidth = 5// 线的样式颜色context.strokeStyle = '#005588'// 执行划直线这个操作context.stroke()} else {alert('当前浏览器不支持canvas，请更换浏览器后再试')}
}
效果
3、线条组成的图形 - 画一个三角形
window.onload = function () {var canvas = document.getElementById('canvas')canvas.width = 1024canvas.height = 768if (canvas.getContext('2d')) {var context = canvas.getContext('2d')// 使用context绘制// 从坐标(100,100)为起点开始context.moveTo(100, 100)context.lineTo(700, 700)context.lineTo(100, 700)context.lineTo(100, 100)// 线宽为5context.lineWidth = 5// 线的样式颜色context.strokeStyle = '#005588'// 执行划直线这个操作context.stroke()} else {alert('当前浏览器不支持canvas，请更换浏览器后再试')}
}
4、多边形填充加描边
- context.fillStyle = ‘rgb(2,100,30)’ 填充的颜色
- context.fill() 填充
window.onload = function () {var canvas = document.getElementById('canvas')canvas.width = 1024canvas.height = 768if (canvas.getContext('2d')) {var context = canvas.getContext('2d')// 使用context绘制// 从坐标(100,100)为起点开始context.moveTo(100, 100)// 到坐标(700,700)为终点画一条直线context.lineTo(700, 700)context.lineTo(100, 700)context.lineTo(100, 100)// 线宽为5context.lineWidth = 5// 线的样式颜色context.strokeStyle = '#f00'// 执行划直线这个操作context.stroke()// 多边形填充context.fillStyle = 'rgb(2,100,30)'context.fill()} else {alert('当前浏览器不支持canvas，请更换浏览器后再试')}
}
5、定义两个形状
- context.beginPath() 起始
- context.closePath() 结束
- 这两个方法将两段路径包裹起来将其与其它路径分隔开
window.onload = function () {
var canvas = document.getElementById('canvas')canvas.width = 1024canvas.height = 768if (canvas.getContext('2d')) {var context = canvas.getContext('2d')// 使用context绘制// 从坐标(100,100)为起点开始context.beginPath()context.moveTo(100, 100)// 到坐标(700,700)为终点画一条直线context.lineTo(700, 700)context.lineTo(100, 700)context.lineTo(100, 100)context.closePath()// 线宽为5context.lineWidth = 5// 线的样式颜色context.strokeStyle = '#f00'// 执行划直线这个操作context.stroke()// // 多边形填充// context.fillStyle = 'rgb(2,100,30)'// context.fill()context.beginPath()context.moveTo(200, 100)context.lineTo(700, 600)context.closePath()context.strokeStyle = '#000'context.stroke()} else {alert('当前浏览器不支持canvas，请更换浏览器后再试')}
}
6、七巧板demo例子
- html部分
<canvas id="canvas" width="800" height="800" style="background-color: aliceblue;display: block;margin: 10px auto;">当前浏览器不支持canvas，请更换浏览器后再试
</canvas>
- 自造数据部分
var tangram = [{p: [{x: 0,y: 0},{x: 800,y: 0},{x: 400,y: 400},],color: '#caff67'}, {p: [{x: 0,y: 0},{x: 400,y: 400},{x: 0,y: 800},],color: '#67becf'}, {p: [{x: 0,y: 800},{x: 400,y: 400},{x: 400,y: 800},],color: '#f50'}, {p: [{x: 400,y: 800}, {x: 800,y: 800}, {x: 400,y: 400}, ],color: '#0f5'}, {p: [{x: 400,y: 400}, {x: 800,y: 0}, {x: 600,y: 600}, ],color: '#25f'}, {p: [{x: 800,y: 0}, {x: 600,y: 600}, {x: 800,y: 800}, ],color: '#f33'},
]
- js部分
let canvas = document.getElementById('canvas')if (canvas.getContext('2d')) {var context = canvas.getContext('2d')tangram.forEach((item, index) => {draw(item, context)})}function draw(piece, cxt) {cxt.beginPath()cxt.moveTo(piece.p[0].x, piece.p[0].y)piece.p.forEach((item, index) => {cxt.lineTo(item.x, item.y)})cxt.closePath()cxt.fillStyle = piece.colorcxt.fill()cxt.lineWidth = 2cxt.strokeStyle = '#000'cxt.stroke()
}
7、绘制正方形demo
<canvas id="canvas" width="1024" height="768" style="display: block;
background-color: #eee;margin: 10px auto;">不能使用
canvas
</canvas>
<script>var canvas = document.getElementById('canvas')var context = canvas.getContext('2d')drawRect(context, 100, 100, 400, 400, 10, '#600', '#008833')function drawRect(cxt, x, y, width, height, borderWidth, borderColor, borderFill) {cxt.beginPath()cxt.moveTo(x, y)cxt.lineTo(x + width, y)cxt.lineTo(x + width, y + height)cxt.lineTo(x + width, y + height)cxt.lineTo(x, y + height)cxt.closePath()cxt.lineWidth = borderWidthcxt.strokeStyle = borderColorcxt.fillStyle = borderFillcxt.fill()cxt.stroke()}
</script>
总结
本文问canvas第一节，之后会持续更新，大家感觉还实用的话，关注或者点个赞都可以，谢谢啦
canvas基础1
系列文章目录
本文开始是canvas，通俗易懂，小白也没烦恼，根据慕课网liuyubobobo老师的视频课学习整理
视频课指路：慕课网 liuyubobobo老师 炫丽的倒计时效果Canvas绘图与动画基础
文章目录
- 系列文章目录
- 1、声明标签
- 2、画一条直线
- 3、线条组成的图形 - 画一个三角形
- 4、多边形填充加描边
- 5、定义两个形状
- 6、七巧板demo例子
- 7、绘制正方形demo
- 总结
1、声明标签
- 宽高在标签上
<canvas id="canvas" width="1024" height="768"style="background-color: rgb(200,200,200);display: block;margin: 20px auto;"
>当前浏览器不支持canvas，请更换浏览器后再试
</canvas>
- 宽高在js中设置
<canvas id="canvas" style="background-color: rgb(200,200,200);display: block;margin: 20px auto;">当前浏览器不支持canvas，请更换浏览器后再试
</canvas>
window.onload = function () {// 获取var canvas = document.getElementById('canvas')canvas.width = 1024canvas.height = 768// 判断该浏览器是否可以使用canvasif (canvas.getContext('2d')) {// 使用2d绘图var context = canvas.getContext('2d')// 使用context绘制} else {alert('当前浏览器不支持canvas，请更换浏览器后再试')}
}
2、画一条直线
-
canvas先设置状态最后绘制
-
画一条直线js代码
context.moveTo(x, y) 起点
context.lineTo(x, y) 终点
context.lineWidth = 5 线宽
context.strokeStyle = ‘#005588’ 线样式
context.stroke() 绘制
window.onload = function () {var canvas = document.getElementById('canvas')canvas.width = 1024canvas.height = 768if (canvas.getContext('2d')) {var context = canvas.getContext('2d')// 使用context绘制// 从坐标(100,100)为起点开始context.moveTo(100, 100)// 到坐标(700,700)为终点画一条直线context.lineTo(700, 700)// 线宽为5context.lineWidth = 5// 线的样式颜色context.strokeStyle = '#005588'// 执行划直线这个操作context.stroke()} else {alert('当前浏览器不支持canvas，请更换浏览器后再试')}
}
效果
3、线条组成的图形 - 画一个三角形
window.onload = function () {var canvas = document.getElementById('canvas')canvas.width = 1024canvas.height = 768if (canvas.getContext('2d')) {var context = canvas.getContext('2d')// 使用context绘制// 从坐标(100,100)为起点开始context.moveTo(100, 100)context.lineTo(700, 700)context.lineTo(100, 700)context.lineTo(100, 100)// 线宽为5context.lineWidth = 5// 线的样式颜色context.strokeStyle = '#005588'// 执行划直线这个操作context.stroke()} else {alert('当前浏览器不支持canvas，请更换浏览器后再试')}
}
4、多边形填充加描边
- context.fillStyle = ‘rgb(2,100,30)’ 填充的颜色
- context.fill() 填充
window.onload = function () {var canvas = document.getElementById('canvas')canvas.width = 1024canvas.height = 768if (canvas.getContext('2d')) {var context = canvas.getContext('2d')// 使用context绘制// 从坐标(100,100)为起点开始context.moveTo(100, 100)// 到坐标(700,700)为终点画一条直线context.lineTo(700, 700)context.lineTo(100, 700)context.lineTo(100, 100)// 线宽为5context.lineWidth = 5// 线的样式颜色context.strokeStyle = '#f00'// 执行划直线这个操作context.stroke()// 多边形填充context.fillStyle = 'rgb(2,100,30)'context.fill()} else {alert('当前浏览器不支持canvas，请更换浏览器后再试')}
}
5、定义两个形状
- context.beginPath() 起始
- context.closePath() 结束
- 这两个方法将两段路径包裹起来将其与其它路径分隔开
window.onload = function () {
var canvas = document.getElementById('canvas')canvas.width = 1024canvas.height = 768if (canvas.getContext('2d')) {var context = canvas.getContext('2d')// 使用context绘制// 从坐标(100,100)为起点开始context.beginPath()context.moveTo(100, 100)// 到坐标(700,700)为终点画一条直线context.lineTo(700, 700)context.lineTo(100, 700)context.lineTo(100, 100)context.closePath()// 线宽为5context.lineWidth = 5// 线的样式颜色context.strokeStyle = '#f00'// 执行划直线这个操作context.stroke()// // 多边形填充// context.fillStyle = 'rgb(2,100,30)'// context.fill()context.beginPath()context.moveTo(200, 100)context.lineTo(700, 600)context.closePath()context.strokeStyle = '#000'context.stroke()} else {alert('当前浏览器不支持canvas，请更换浏览器后再试')}
}
6、七巧板demo例子
- html部分
<canvas id="canvas" width="800" height="800" style="background-color: aliceblue;display: block;margin: 10px auto;">当前浏览器不支持canvas，请更换浏览器后再试
</canvas>
- 自造数据部分
var tangram = [{p: [{x: 0,y: 0},{x: 800,y: 0},{x: 400,y: 400},],color: '#caff67'}, {p: [{x: 0,y: 0},{x: 400,y: 400},{x: 0,y: 800},],color: '#67becf'}, {p: [{x: 0,y: 800},{x: 400,y: 400},{x: 400,y: 800},],color: '#f50'}, {p: [{x: 400,y: 800}, {x: 800,y: 800}, {x: 400,y: 400}, ],color: '#0f5'}, {p: [{x: 400,y: 400}, {x: 800,y: 0}, {x: 600,y: 600}, ],color: '#25f'}, {p: [{x: 800,y: 0}, {x: 600,y: 600}, {x: 800,y: 800}, ],color: '#f33'},
]
- js部分
let canvas = document.getElementById('canvas')if (canvas.getContext('2d')) {var context = canvas.getContext('2d')tangram.forEach((item, index) => {draw(item, context)})}function draw(piece, cxt) {cxt.beginPath()cxt.moveTo(piece.p[0].x, piece.p[0].y)piece.p.forEach((item, index) => {cxt.lineTo(item.x, item.y)})cxt.closePath()cxt.fillStyle = piece.colorcxt.fill()cxt.lineWidth = 2cxt.strokeStyle = '#000'cxt.stroke()
}
7、绘制正方形demo
<canvas id="canvas" width="1024" height="768" style="display: block;
background-color: #eee;margin: 10px auto;">不能使用
canvas
</canvas>
<script>var canvas = document.getElementById('canvas')var context = canvas.getContext('2d')drawRect(context, 100, 100, 400, 400, 10, '#600', '#008833')function drawRect(cxt, x, y, width, height, borderWidth, borderColor, borderFill) {cxt.beginPath()cxt.moveTo(x, y)cxt.lineTo(x + width, y)cxt.lineTo(x + width, y + height)cxt.lineTo(x + width, y + height)cxt.lineTo(x, y + height)cxt.closePath()cxt.lineWidth = borderWidthcxt.strokeStyle = borderColorcxt.fillStyle = borderFillcxt.fill()cxt.stroke()}
</script>
总结
本文问canvas第一节，之后会持续更新，大家感觉还实用的话，关注或者点个赞都可以，谢谢啦