web前端学习（二）html学习笔记部分（5）--拖放元素、canvas画布使用

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 用来定义用于网络的基于矢量的图形

　　3)：SVG 使用 XML 格式定义图形

　　4)：SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失

　　5)：SVG 是万维网联盟的标准

　　2、SVG的优势：

　　1)：SVG 图像可通过文本编辑器来创建和修改

　　2)：SVG 图像可被搜索、索引、脚本化或压缩

　　3)：SVG 是可伸缩的

　　4)：SVG 图像可在任何的分辨率下被高质量地打印

　　5)：SVG 可在图像质量不下降的情况下被放大

1.2.17.2 SVG绘制矢量图形

1.2.17.3 引入外部SVG文件

　　引入外部svg文件的后缀名是svg，复制完之后要在.svg文件中加入一个头然后再写内容，这样这个文件就可以使用了

<?xml version="1.0"?>

本内容暂时不做笔记，保存草稿以后补上！

巴特西

web前端学习（二）html学习笔记部分（5）--拖放元素、canvas画布使用

最新文章

热门文章