当前位置:网站首页>canvas基础1 - 画直线(通俗易懂)
canvas基础1 - 画直线(通俗易懂)
2022-07-06 09:21:00 【玲小叮当】
系列文章目录
本文开始是canvas,通俗易懂,小白也没烦恼,根据慕课网liuyubobobo老师的视频课学习整理
视频课指路:慕课网 liuyubobobo老师 炫丽的倒计时效果Canvas绘图与动画基础
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 = 1024
canvas.height = 768
// 判断该浏览器是否可以使用canvas
if (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 = 1024
canvas.height = 768
if (canvas.getContext('2d')) {
var context = canvas.getContext('2d')
// 使用context绘制
// 从坐标(100,100)为起点开始
context.moveTo(100, 100)
// 到坐标(700,700)为终点画一条直线
context.lineTo(700, 700)
// 线宽为5
context.lineWidth = 5
// 线的样式颜色
context.strokeStyle = '#005588'
// 执行划直线这个操作
context.stroke()
} else {
alert('当前浏览器不支持canvas,请更换浏览器后再试')
}
}
效果
3、线条组成的图形 - 画一个三角形
window.onload = function () {
var canvas = document.getElementById('canvas')
canvas.width = 1024
canvas.height = 768
if (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)
// 线宽为5
context.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 = 1024
canvas.height = 768
if (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)
// 线宽为5
context.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 = 1024
canvas.height = 768
if (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()
// 线宽为5
context.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.color
cxt.fill()
cxt.lineWidth = 2
cxt.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 = borderWidth cxt.strokeStyle = borderColor cxt.fillStyle = borderFill cxt.fill() cxt.stroke() } </script>
总结
本文问canvas第一节,之后会持续更新,大家感觉还实用的话,关注或者点个赞都可以,谢谢啦
边栏推荐
- Set container
- Arduino+ water level sensor +led display + buzzer alarm
- 【九阳神功】2018复旦大学应用统计真题+解析
- 1. C language matrix addition and subtraction method
- 【九阳神功】2016复旦大学应用统计真题+解析
- 魏牌:产品叫好声一片,但为何销量还是受挫
- Zatan 0516
- 最新坦克大战2022-全程开发笔记-1
- [the Nine Yang Manual] 2019 Fudan University Applied Statistics real problem + analysis
- Detailed explanation of redis' distributed lock principle
猜你喜欢
Redis的两种持久化机制RDB和AOF的原理和优缺点
IPv6 experiment
1. C language matrix addition and subtraction method
一段用蜂鸣器编的音乐(成都)
6. Function recursion
Application architecture of large live broadcast platform
4. Binary search
受检异常和非受检异常的区别和理解
(超详细onenet TCP协议接入)arduino+esp8266-01s接入物联网平台,上传实时采集数据/TCP透传(以及lua脚本如何获取和编写)
FAQs and answers to the imitation Niuke technology blog project (III)
随机推荐
3.猜数字游戏
MySQL lock summary (comprehensive and concise + graphic explanation)
12 excel charts and arrays
A comprehensive summary of MySQL transactions and implementation principles, and no longer have to worry about interviews
【九阳神功】2020复旦大学应用统计真题+解析
Rich Shenzhen people and renting Shenzhen people
Questions and answers of "Fundamentals of RF circuits" in the first semester of the 22nd academic year of Xi'an University of Electronic Science and technology
Cloud native trend in 2022
MPLS experiment
4.二分查找
编写程序,模拟现实生活中的交通信号灯。
Redis的两种持久化机制RDB和AOF的原理和优缺点
(超详细onenet TCP协议接入)arduino+esp8266-01s接入物联网平台,上传实时采集数据/TCP透传(以及lua脚本如何获取和编写)
7.数组、指针和数组的关系
Network layer 7 protocol
7. Relationship between array, pointer and array
Floating point comparison, CMP, tabulation ideas
Redis cache obsolescence strategy
FileInputStream和BufferedInputStream的比较
ArrayList的自动扩容机制实现原理