html5 画布模拟房间定位 html画布例子

转载

mob64ca1405d568 2024-01-29 13:13:27

文章标签 html5 画布模拟房间定位前端 ViewUI SVG HTML5 文章分类 HTML5 移动开发

1.2.11 拖放

1.2.11.1 html拖放

1.2.11.2 html拖放本次资源

showOjb(一个对象)展示一下一个对象的信息。

1.2.12 html画布（canvas）标签的使用

1.2.12.1 HTML5画布标签-创建画布

创建画布一般只使用js创建，不适用html直接创建。

<script>
        CANVAS_WIDTH = 200; CANVAS_HEIGHT = 200;
        window.onload = function(){
            createCanvas();
        }
        function createCanvas(){
            document.body.innerHTML = "<canvas id=\"mycanvas\" width=\""+CANVAS_WIDTH+";height=\""+CANVAS_HEIGHT+";></canvas>"
        }
    </script>

1.2.12.2 HTML5画布标签-绘制图形

webDocs网站查找webAPI网站内容

<script>
        CANVAS_WIDTH = 500; CANVAS_HEIGHT = 500;
        var mycanvas,context;
        window.onload = function(){
            createCanvas();
            drawRect();
        }
        function createCanvas(){
            document.body.innerHTML = "<canvas id=\"mycanvas\" width=\""+CANVAS_WIDTH+"\""+" height="+"\""+CANVAS_HEIGHT+"\""+"></canvas>";
            //+传的是这边js中的值，所以需要注意将+号用引号调整好。
            // document.body.innerHTML = "<canvas id=\"mycanvas\" width=\""+CANVAS_WIDTH+"\""+" height="+"\""+CANVAS_HEIGHT+"\""+"></canvas>";
            mycanvas = document.getElementById("mycanvas");
            context = mycanvas.getContext("2d");
        }
        function drawRect(){
            // context.fillStyle = "#ff0000";/*填充颜色*/
            // context.rotate(45);/*旋转*/
            context.translate(50,50);/*平移*/
            // context.scale(2,0.5);/*缩放*/
            context.fillRect(0,0,200,200);/*绘制在0，0坐标下长宽为200,200的矩形*/
        }
    </script>

1.2.12.3 HTML5画布标签-绘制图片

<script>
        CANVAS_WIDTH = 1000; CANVAS_HEIGHT = 1000;
        var mycanvas,context;
        window.onload = function(){
            createCanvas();
            // drawRect();
            drawImage();
        }
        function createCanvas(){
            document.body.innerHTML = "<canvas id=\"mycanvas\" width=\""+CANVAS_WIDTH+"\""+" height="+"\""+CANVAS_HEIGHT+"\""+"></canvas>";
            //+传的是这边js中的值，所以需要注意将+号用引号调整好。
            // document.body.innerHTML = "<canvas id=\"mycanvas\" width=\""+CANVAS_WIDTH+"\""+" height="+"\""+CANVAS_HEIGHT+"\""+"></canvas>";
            mycanvas = document.getElementById("mycanvas");
            context = mycanvas.getContext("2d");
        }
        function drawRect(){
            // context.fillStyle = "#ff0000";/*填充颜色*/
            // context.rotate(45);/*旋转*/
            context.translate(50,50);/*平移*/
            // context.scale(2,0.5);/*缩放*/
            context.fillRect(0,0,200,200);/*绘制在0，0坐标下长宽为200,200的矩形*/
        }
        function drawImage(){
            var img = new Image();
            img.onload = function(){
                context.drawImage(img,0,0);
            }
            img.src = "pic/pic.jpg";
        }
    </script>

以下内容暂时不做笔记，保存草稿看完所有视频或者找到工作之后补上！

1.2.13 canvas使用路径

1.2.13.1 HTML5绘制圆形

　　HTML5绘制圆形，主要包含四个步骤，开始创建路径、创建图形的路径、路径创建完成后，关闭路径（很重要）和设定绘制样式，调用绘制方法，绘制路径。

绘制完一个图形时路径必须关闭是因为不关闭路径在重复绘制图形时原来绘制过的图形会重新绘制一遍（导致透明度加深）。

<body onload="draw('canvas')">
    <!--在html中传递参数时需要注意不和js一样
    js中可以直接写变量名不需要带引号，而这里需要带引号-->
    <canvas id="canvas" width="600px" height="700px"></canvas>
</body>

1.2.13.2 HTML5 moveTo与lineTo

　　moveTo与lineTo，作用是将光标移动到指定坐标点，绘制直线的时候以这个坐标点为起点，moveTo(x,y)。

1.2.13.3 使用bezierCurveTo绘制贝塞尔曲线

　　使用bezierCurveTo绘制贝塞尔曲线，绘制曲线需要注意使用方法的参数，bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);

1.2.14 HTML5画布绘制渐变图形与绘制变形图形

1.2.15 HTML5画布图形绘制处理

1.2.16 HTML5画布应用

1.2.17 SVG

1.2.17.1 SVG介绍

　　1、什么是SVG？

　　1)：SVG 指可伸缩矢量图形 (Scalable Vector Graphics)

　　2)：SVG 用来定义用于网络的基于矢量的图形