demo_06Canvas

Posted 2020-08-03 vmanas

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了demo_06Canvas相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #myCanvas{
                background-color: #fde;
            }
        </style>
    </head>
    <body>
        <canvas id="myCanvas" width="1000" height="500"></canvas>
    </body>
    <script type="text/javascript">
        var oc  = document.getElementById("myCanvas");
        
        var ctx = oc.getContext("2d");
        
        
        var isAdd ;
        var obj = {
            x : 50,
            y: 50,
            width : 200,
            height : 200
        }
        var num = 0
        function rotate(){
            ctx.save();
            if(num==200){
                isAdd = false;
            }
            if(num==0){
                isAdd = true;
            }
            if(isAdd){
                num++;
            }
            else{
                num--;
            }
            ctx.clearRect(0,0,500,500);
            ctx.fillStyle="blueviolet";
            ctx.translate(obj.x+(obj.width)/2,obj.y+(obj.height)/2);
            ctx.scale(num/100,num/100);
            ctx.rotate(num*Math.PI/180);
            
            ctx.translate(-(obj.x+(obj.width)/2),-(obj.y+(obj.height)/2))
            ctx.fillRect(obj.x,obj.y,obj.width,obj.height);
            ctx.restore();
        }
        setInterval(function(){
            rotate();
            
        },10);
        
    </script>
</html>

在Canvas中添加save（）和restore（）方法是因为Canvas的绘制实在上一个绘制图形之后继续绘制的（覆盖）。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            body{
                background: red;
            }
            #canvas{
                background: white;
                width: 400px;
                height: 400px;
            }

        </style>
    </head>
    <body>
        <!-- 默认canvas大小width300px，height150px -->
        <!-- 宽高必须在canvas标签的属性中设置，在css中写的话，是将canvas进行拉伸 -->
        <canvas id="canvas" width="400" height="400">
            <span>这是一个画布，请用ie10+浏览器查看，或者。。。。</span>
        </canvas>
        
        <input type="color" id="colorInput"/>
        <input type="number" id="numberInput" value="1"/>

        <script>
            //得到画布
            var oC = document.getElementById(‘canvas‘);
            //得到canvas的上下文环境
            //目前只支持2d环境
            var oGC = oC.getContext(‘2d‘);
            
            oC.onmousedown = function(ev){
                var colorInput = document.getElementById(‘colorInput‘);
                var numberInput = document.getElementById(‘numberInput‘);
                oGC.strokeStyle = colorInput.value;
                oGC.lineWidth = numberInput.value;
                oGC.beginPath();
                
                var ev = ev || window.event;
                //得到按下这个点相对于canvas的位置
                oGC.moveTo(ev.clientX - oC.offsetLeft, ev.clientY - oC.offsetTop);
            
                document.onmousemove = function(ev){
                    var ev = ev || window.event;
                    oGC.lineTo(ev.clientX - oC.offsetLeft, ev.clientY - oC.offsetTop);
                    oGC.stroke();
                }
                
                document.onmouseup = function(){
                    oGC.closePath();
                    document.onmousemove = null;
                    document.onmouseup = null;
                }
            
            }
            
            
            



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

以上是关于demo_06Canvas的主要内容，如果未能解决你的问题，请参考以下文章

(自己看)HTML5 Canvas下雨动画DEMO演示

canvas系列canvas实现“ 简单的Amaziograph效果”--画对称图强迫症福利

HTML5 Canvas 支持和 Android Webview

前端特效demo | 值得收藏的6个 HTML5 Canvas 实用案例

自己定义View时，用到Paint Canvas的一些温故，简单的帧动画（动画一，"掏粪男孩Gif"顺便再提提onWindowFocusChanged）(代码片段

canvas获取浏览器坐标（vue项目demo，其余是一样的）