canvas HTML5 重中之重

赵匡胤 · 发表于 2021-9-24 22:17:38

本帖最后由赵匡胤于 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------->填充颜色；

绘制直线

[JavaScript] 纯文本查看 复制代码

<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>

账号		自动登录	找回密码
密码			注册账号

[JS] canvas HTML5 重中之重

【江湖新秀】

【我是小土豪】

【宝剑回鞘】

【泰拉达人】

【奥运选手】

【潜水高手】