H5,canvas标签入门

html画板标签

<!DOCTYPE html>
<html   lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>
<body>
    <!-- 如果使用css控制canvas宽高会导致图像拉伸一半写在行内属性中 -->
    <!-- canvas默认是300*150的大小 -->
    <canvas id="mycanvas">您的浏览器不支持canvas</canvas>
    <script>
        var mycanvas = document.getElementById('mycanvas');
        //获取上下文
        var ctx=mycanvas.getContext('2d');
        //绘制并且填充矩形
        //四个参数分别是水平坐标,垂直坐标,宽,高
        ctx.Rect(50,50,50,50)

</script>
</body>
</html>

三角形和正方形绘画

<!DOCTYPE html>
<html   lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我</title>

</head>
<body>
    <!-- 如果使用css控制canvas宽高会导致图像拉伸一半写在行内属性中 -->
    <!-- canvas默认是300*150的大小 -->
    <canvas id="mycanvas" width="900" height="900">您的浏览器不支持canvas</canvas>
    <script>
        var mycanvas = document.getElementById('mycanvas');
        //获取上下文
        var ctx=mycanvas.getContext('2d');
        
        //路径
        ctx.rect(100,100,100,100);
        //设置填充颜色
        ctx.fillStyle="red"
        //描边颜色 
        ctx.strokeStyle='green'
        //填充
        
        ctx.fill();
        //描边
        ctx.stroke()
        //初始化 画一个正方形
        ctx.beginPath()
        //设置路径开始点
        ctx.moveTo(350,50)
        //从之前的点,画到这里
        ctx.lineTo(450,50)
        ctx.lineTo(450,150)
        ctx.lineTo(350,150)
        ctx.lineTo(350,50)

        ctx.stroke()
        //三角形
        ctx.beginPath()
        ctx.moveTo(600,50);
        ctx.lineTo(670,150);
        ctx.lineTo(530,150);
        //直接划到原来的点没有闭合
        // ctx.lineTo(600,50)
        //闭合路径
        ctx.closePath()//把最后的点和最开始的点连接在一起

        ctx.lineWidth=10
        ctx.stroke()
        
        //圆形
        ctx.beginPath()
        //圆形参数 中心点x 中心点y 半径r 起始弧度 结束弧度 
        //最后一个可选参数,顺时针连接还是逆时针连接, true是顺时针为默认值,fakse为逆时针 
        ctx.arc(100,300,80,0,2*Math.PI);
        ctx.fillStyle='#66ccff';
        ctx.fill()
        
        //文字
        ctx.lineWidth=2
        ctx.font='32px 微软雅黑'
        //设置的初始位置是文字左下角
        //水平对齐
        ctx.textAlign='center'//这一设置初始点的位置在文字中间
        //垂直对齐
        ctx.textBaseline='middle'//垂直对齐初始点在中间

        ctx.fillText('大家好',400,300)
        ctx.strokeText('兄弟们好',300,500)
        

</script>
</body>
</html>

H5,canvas标签入门