canvas HTML5 重中之重
本帖最后由 赵匡胤 于 2021-9-24 22:18 编辑canvas是HTML5中的重点；今天简单的学习了一下，总结一下canvas的概念；canvas是要有面向对象的思维；各个标签就像我们画水彩画一样，需要注意标签使用的顺序
canvas就是一个画布；可以画线，图形，填充等。操作图片和文本。操作方式是使用js；可以提供2d图形，3d图形绘制；
canvas使用：
①<canvas id='myCanvas' width='500' height='500'></canvas>
需要有一个ID ，画布的尺寸；
②通过ID获取canvas的Dom对象，获取context；
var canvasDom=document.getElementById('canvas')
var context=canvasDom.getContext('2d')
操作context两种默认方式：1，绘制线（stroke）2，填充（fill）；
moveTO(x,y)移动x,y
lineTo(x,y)连线至x ，y
stroke();描边；
lineWidth：绘制出的线粗细；
fillRect(x,y,width,height)填充矩形；
clearRect(x,y,width,height)清除画布区域；清除重复绘制的现象
beginPath-->开辟新路径；
closePath--->闭合路径；
stroke()--->描边；
fill();--->>填充；
lineWidth---》线宽；
lineJoin----->连接点样式；
lineCap------>线头样式；
strokeStyle--->描边颜色；
fillStyle------->填充颜色；
绘制直线
<body>
<canvas id="myCanvas" width="500" height="500"></canvas>
<script>
var oCanvas=document.querySelector('canvas')
var ctx=myCanvas.getContext('2d')
ctx.moveTo(x,y)//x,y坐标
ctx.lineTo(x,y)//绘制到x,y这个位置
ctx.lineWidth='10'//绘制线宽10px;
ctx.strokeStyle='red'//绘制线颜色
ctx.fillStyle='blue'//填充颜色
ctx.stroke（）//描边
ctx.fill()//
</script>
</body>
页:
[1]