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画布使用的更多相关文章

  1. Web前端与移动开发学习路线图

    文章转载自「开发者圆桌」一个关于开发者入门.进阶.踩坑的微信公众号 这里整理的Web前端与移动开发学习路线图包含初中级两个部分,你可以通过百度云盘下载观看对应的视频 链接: http://pan.ba ...

  2. 想做web前端project师应该学习些什么？

    偶然间看到这篇文章.感觉博主写的挺不错的,假设你想做web前端project师的话,建议您阅读下面这篇文章,事实上web前端project师所做的工作事实上就是站点设计,有些小公司的美工事实上就是做w ...

  3. 最全的WEB前端开发程序员学习清单

    史上最全的WEB前端开发程序员学习清单! 今天为什么要给大家分享这篇文章呢,我发现最近来学前端的特别多,群里面整天都有人问:前端好找工作吗?前端要怎么学啊?前端工资怎么样?前端XX,前端XXX,虽然我 ...

  4. web前端开发控件学习笔记之jqgrid+ztree+echarts

    版权声明:本文为博主原创文章,转载请注明出处.   作为web前端初学者,今天要记录的是三个控件的使用心得,分别是表格控件jqgrid,树形控件ztree,图表控件echarts.下边分别进行描述. ...

  5. 2022年Web前端开发流程和学习路线（详尽版）

    前言 前端侧重于人机交互和用户体验,后端侧重于业务逻辑和大规模数据处理.理论上,面向用户的产品里,所有问题(包括产品.设计.后端.甚至看不见的问题)的表现形式,都会暴露在前端,而只有部分问题(数据问题 ...

  6. web前端零基础入门学习！前端真不难！

    现在互联网发展迅速,前端也成了很重要的岗位之一,许多人都往前端靠拢,可又无能为力,不知所措,首先我们说为什么在编程里,大家都倾向于往前端靠呢?原因很简单,那就是,在程序员的世界里,前端开发是最最简单的 ...

  7. 最适合2018年自学的web前端零基础系统学习视频＋资料

    这份资料整理花了近7天,如果感觉有用,可以分享给更有需要的人. 在看接下的介绍前,我先说一下整理这份资料的初衷: 我的初衷是想帮助在这个行业发展的朋友和童鞋们,在论坛博客等地方少花些时间找资料,把有限 ...

  8. 史上最全的web前端开发程序员学习清单！

    今天为什么要给大家分享这篇文章呢,我发现最近来学前端的特别多,群里面整天都有人问:前端好找工作吗?前端要怎么学啊?前端工资怎么样?前端XX,前端XXX,虽然我回答过无数次这种问题了,但是问这个的还是有 ...

  9. WEB 前端模块化，读文笔记

    文章链接 WEB 前端模块化都有什么? 知识点 根据平台划分 浏览器 AMD.CMD 存在网络瓶颈,使用异步加载 非浏览器 CommonJS 直接操作 IO,同步加载 浏览器 AMD 依赖前置 req ...

  10. web前端——Vue.js基础学习

    近期项目的前端页面准备引入Vue.js,看了网上一些简介,及它和JQuery的对比,发现对于新入门的前端开发来说,Vue 其实也是比较适用的一个框架,其实用性不比JQuery差,感觉还挺有意思,于是研 ...

随机推荐

  1. NYOJ--860 又见01背包（01背包）

    题目http://acm.nyist.net/JudgeOnline/problem.php?pid=860 分析:题目和普通的01背包问题一样,但是唯一不同的是数据的特殊性. 如果10^9根本就开辟 ...

  2. ucore 地址映射的几个阶段

    第零阶段: 启动之后的实模式阶段 vir = lin = pa 第一阶段 : 启动 bootloader 的段式分页 这里段基址是0 ,所以地址空间维持不变 vir addr = lin addr = ...

  3. Spring Boot 集成Jsp与生产环境部署

    一.简介 提起Java不得不说的一个开发场景就是Web开发,也是Java最热门的开发场景之一,说到Web开发绕不开的一个技术就是JSP,因为目前市面上仍有很多的公司在使用JSP,所以本文就来介绍一下S ...

  4. for update行级锁的作用

    1.for update叫排它锁,是一种行级锁,一旦用户对某个行施加了行级加锁,则该用户可以查询也可以更新被加锁的数据行,其它用户只能查询但不能更新被加锁的数据行．如果其它用户想更新该表中的数据行,则 ...

  5. [Hdu-5155] Harry And Magic Box[思维题+容斥，计数Dp]

    Online Judge:Hdu5155 Label:思维题+容斥,计数Dp 题面: 题目描述 给定一个大小为\(N*M\)的神奇盒子,里面每行每列都至少有一个钻石,问可行的排列方案数.由于答案较大, ...

  6. Luogu P3496 [POI2010]GIL-Guilds(贪心+搜索)

    P3496 [POI2010]GIL-Guilds 题意 给一张无向图,要求你用黑(\(K\))白(\(S\))灰(\(N\))给点染色,且满足对于任意一个黑点,至少有一个白点和他相邻:对于任意一个白 ...

  7. 如何使用Junit进行单元测试

    测试方法的要求: 必须是public 无返回值 无参数 @Testpublic void f1(){ .....} 在@Test上按下 Ctrl+1(快速锁定错误) 引入Junit包 在方法名上右键 ...

  8. Codeigniter 数据库操作事务情况下获取不到last_insert_id()

    开发中,数据库Insert使用了事务,如果 $this->db->insert_id() 放在 $this->db->trans_complete(); 这句语句之后,$thi ...

  9. Python中的HTMLParser、cookielib抓取和解析网页、从HTML文档中提取链接、图像、文本、Cookies（二）

    对搜索引擎.文件索引.文档转换.数据检索.站点备份或迁移等应用程序来说,经常用到对网页(即HTML文件)的解析处理.事实上,通过 Python语言提供的各种模块,我们无需借助Web服务器或者Web浏览 ...

  10. HZOI20190908模拟40 队长快跑，影魔，抛硬币 题解

    题面:https://www.cnblogs.com/Juve/articles/11487699.html 队长快跑: 权值线段树与dp yy的不错 #include<iostream> ...