共计 4480 个字符,预计需要花费 12 分钟才能阅读完成。
系列文章目录
本文开始是 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 第一节,之后会继续更新,大家感觉还实用的话,关注或者点个赞都能够,谢谢啦
正文完