Rumah hujung hadapan web Tutorial H5 后盾网HTML5视频教程

后盾网HTML5视频教程

Sep 01, 2017 pm 02:30 PM
h5 html5 Tutorial

《后盾网HTML5视频教程》是现在以及未来一项重要的技术,学好HTML5不仅可以让你开发WEB前端界面,设计出能够适应各种尺寸设备的网页;甚至可以让你使用HTML5技术开发出Hybird App(一种混合式开发Android/iOS/Windows Phone等设备的应用);或者用HTML5技术开发出桌面程序(参看Node Webkit项目,请自行Github)。

[SITV~$TS36XU`A7A_CB(MW.png

课程播放地址:http://www.php.cn/course/469.html

该老师讲课风格:

教师讲课深入浅出,条理清楚,层层剖析,环环相扣,论证严密,结构严谨,用思维的逻辑力量吸引学生的注意力,用理智控制课堂教学进程。学生通过听教师的讲授,不仅学到知识,也受到思维的训练,还受到教师严谨的治学态度的熏陶和感染

本视频中较为难点是HTML5 Canvas了:

1、什么是Canvas

canvas 是 HTML5 提供的一个用于展示绘图效果的标签

canvas 提供了一个空白的图形区域,可以使用特定的JavaScript API来绘画图形(canvas 2D或WebGL)

首先由 Apple 引入的,用于OS X的仪表盘 和 Safari 浏览器

1.1 关于Canvas的一些说明

canvas 是一个矩形区域的画布,可以用JavaScript在上面绘画。控制其每一个像素。

canvas 标签使用 JavaScript 在网页上绘制图像,本身不具备绘图功能。

canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

canvas的标准:

最新标准

稳定版本的标准

目前来说,标准还在完善中。先用早期的api足够完成所有的应用

1.2 canvas主要应用的领域(了解)

1、游戏:canvas在基于Web的图像显示方面比Flash更加立体、更加精巧,canvas游戏在流畅度和跨平台方面更牛。

2、可视化数据(数据图表话),比如: 百度的echart、d3.js、three.js

3、banner广告:Flash曾经辉煌的时代,智能手机还未曾出现。现在以及未来的智能机时代,HTML5技术能够在banner广告上发挥巨大作用,用Canvas实现动态的广告效果再合适不过。

4、未来

模拟器:无论从视觉效果还是核心功能方面来说,模拟器产品可以完全由JavaScript来实现。

远程计算机控制:Canvas可以让开发者更好地实现基于Web的数据传输,构建一个完美的可视化控制界面。

图形编辑器:Photoshop图形编辑器将能够100%基于Web实现。

1.3 课程目标

学会使用基本的 canvas api, 使用 canvas 可以完成简单的绘图

实现数据的可视化

2、Canvas标签介绍

<canvas width="600" height="400"></canvas>
Salin selepas log masuk

作用:展示绘图的内容,但不能进行绘图

2.1 canvas的兼容性

<canvas width="600" height="400">
Salin selepas log masuk

IE9及其以上版本的浏览器,才支持canvas标签
提示:您的浏览器不支持canvas,请升级浏览器

2.2 设置宽高注意点

1 可以使用 html属性/DOM属性 width 和 height来设置

2 不要:使用CSS样式来设置宽高

使用 属性设置宽高,实际上相当于增加了 canvas画布的像素
默认宽高: 300*150,表示:水平方向有300个像素,垂直方向有150个像素
使用属性设置宽高,是增加或减少了canvas画布的像素;
而使用css样式,不会增加像素点,只是将每个像素点扩大了!

2.3 绘图

使用JavaScript中提供的绘图API来绘制

每个canvas都有一套绘图的API(工具)

2.3.1 绘图的基本步骤

1 找到canvas画布

2 通过canvas拿到绘图上下文(一系列的API集合)

3 使用API绘制需要的图形

// 1 找到canvas
var cv = document.getElementById("canvasId");
// 2 拿到canvas绘图上下文
var ctx = cv.getContext("2d");
// 3 使用上下文中的API绘制图形
ctx.moveTo(100, 100);   // 将画笔移动到 100,100 的位置
ctx.lineTo(200, 100);   // 从 100,100 到 200,100 画一条线段
ctx.stroke();           // 描边
Salin selepas log masuk

注意点:

getContext("2d"), 参数`2d`是指获取到绘制平面图形的上下文;
如果想绘制立体图形,需要传入参数:"webgl"

2d上下文类型:CanvasRenderingContext2D

获得 webgl 上下文:(了解)

var cCv = document.createElement("canvas");
        console.log(cCv.getContext("webgl"));
Salin selepas log masuk

Atas ialah kandungan terperinci 后盾网HTML5视频教程. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Repo: Cara menghidupkan semula rakan sepasukan
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Cara mendapatkan biji gergasi
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Sempadan Jadual dalam HTML Sempadan Jadual dalam HTML Sep 04, 2024 pm 04:49 PM

Panduan untuk Sempadan Jadual dalam HTML. Di sini kita membincangkan pelbagai cara untuk menentukan sempadan jadual dengan contoh Sempadan Jadual dalam HTML.

Jadual Bersarang dalam HTML Jadual Bersarang dalam HTML Sep 04, 2024 pm 04:49 PM

Ini ialah panduan untuk Nested Table dalam HTML. Di sini kita membincangkan cara membuat jadual dalam jadual bersama-sama dengan contoh masing-masing.

HTML jidar-kiri HTML jidar-kiri Sep 04, 2024 pm 04:48 PM

Panduan untuk HTML margin-kiri. Di sini kita membincangkan gambaran keseluruhan ringkas tentang HTML margin-left dan Contoh-contohnya bersama-sama dengan Pelaksanaan Kodnya.

Susun Atur Jadual HTML Susun Atur Jadual HTML Sep 04, 2024 pm 04:54 PM

Panduan untuk Susun Atur Jadual HTML. Di sini kita membincangkan Nilai Susun Atur Jadual HTML bersama-sama dengan contoh dan output n perincian.

Memindahkan Teks dalam HTML Memindahkan Teks dalam HTML Sep 04, 2024 pm 04:45 PM

Panduan untuk Memindahkan Teks dalam HTML. Di sini kita membincangkan pengenalan, cara teg marquee berfungsi dengan sintaks dan contoh untuk dilaksanakan.

Senarai Tertib HTML Senarai Tertib HTML Sep 04, 2024 pm 04:43 PM

Panduan kepada Senarai Tertib HTML. Di sini kami juga membincangkan pengenalan senarai dan jenis Tertib HTML bersama-sama dengan contoh mereka masing-masing

Butang onclick HTML Butang onclick HTML Sep 04, 2024 pm 04:49 PM

Panduan untuk Butang onclick HTML. Di sini kita membincangkan pengenalan, kerja, contoh dan onclick Event masing-masing dalam pelbagai acara.

Pemegang Tempat Input HTML Pemegang Tempat Input HTML Sep 04, 2024 pm 04:54 PM

Panduan untuk Pemegang Tempat Input HTML. Di sini kita membincangkan Contoh Pemegang Tempat Input HTML bersama-sama dengan kod dan output.

See all articles