zoukankan      html  css  js  c++  java
  • 02 Canvas 入门

    <canvas id="demo" width="600px" height="600px">
            ie9以上才支持
        </canvas>
        <script>
            //1.拿到canvas标签
            var canvas = document.getElementById('demo');
    
            canvas.style.border="1px solid red";
    
            //2.拿到canvas的上下文
            var ctx = canvas.getContext('2d');
    
            //3.绘制
            ctx.moveTo(100,100);
            ctx.lineTo(200,100);
            ctx.lineTo(100,200);
            //ctx.lineTo(100,100);
    
            //闭合
            ctx.closePath();
    
           //边框样式
            ctx.lineWidth=4;
            ctx.strokeStyle="red";
    
           //开始描边
            ctx.stroke();
    
           //填充
            ctx.fillStyle="skyblue";
            ctx.fill();
        </script>

    注意:

    • Canvas用widthheight属性指定画布内容的宽高,单位只能是像素

    • CSS的width和height可以改变Canvas元素的宽高,但是其内容会被等比例拉伸

    • Canvas的width和height被变更时,Canvas上已有的任何绘图都会被清除

    • Context对象就是JavaScript操作Canvas的接口,Canvas自身无法绘制任何内容。Canvas的绘图是使用JavaScript操作的

  • 相关阅读:
    Java后台校验手机号和邮箱
    centos7安装redis
    centos7安装mysql5.7
    VUE环境运行搭建
    Oracle11gR2安装
    VisualSvn-Server搭建
    SpringCloud-Hoxton.SR1-config整合
    项目简介
    linux常用命令
    JAVA NIO
  • 原文地址:https://www.cnblogs.com/suxiaoxia/p/7181362.html
Copyright © 2011-2022 走看看