系列文章目录

本文开始是canvas，通俗易懂，小白也没懊恼，依据慕课网liuyubobobo老师的视频课学习整顿
视频课指路：慕课网 liuyubobobo老师 炫丽的倒计时成果Canvas绘图与动画根底

1、申明标签

  1. 宽高在标签上

    <canvas  id="canvas"  width="1024"  height="768" style="background-color: rgb(200,200,200);display: block;margin: 20px auto;"> 以后浏览器不反对canvas，请更换浏览器后再试</canvas>

  2. 宽高在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、画一条直线

  1. canvas先设置状态最初绘制

  2. 画一条直线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第一节，之后会继续更新，大家感觉还实用的话，关注或者点个赞都能够，谢谢啦