威尼斯www.9778.com-威尼斯正版官方网站

Canvas

日期:2019-12-25编辑作者:Web前端技术

DavidFlanagan,五个优异的JavaScript开采者,近期公布了三个轻量级的JavaScript库—Canto.js,可用以校勘HTML5 Canvas drawing API。

当前的浏览器有以下二种

Canvas绘图- JavaScript 来绘制图像
  <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">�</canvas>

接受 JavaScript 来绘制图像
canvas 元素本身是还没绘图技巧的。全数的绘图专门的学问必需在 JavaScript 内部变成:

示例:

  IE 6~11: 对W3C帮助差, 从IE10始发帮忙ES6

strokeRect()

概念和用法:strokeRect(卡塔尔 方法绘制矩形(不填色)。笔触的暗中同意颜色是鲜青。
JavaScript语法: context.strokeRect(x,y,width,height);

canto("canvas_id").moveTo(100,100).lineTo(200,200,100,200).closePath().stroke();

  Chrome: 谷歌(Google卡塔尔的浏览器, Webkit内核, JS引擎是那多少个天不怕地不怕的V8, 保持自动进级的方式

fillRect()

概念和用法:fillRect(卡塔尔(英语:State of Qatar) 方法绘制“已填色”的矩形。私下认可的填充颜色是深绿。
格式和strokeRect一样。

canto(卡塔尔 重临的是思梅止渴的Canvas,三个 "Canto" 对象;与jQuery的类库相同,各个调用Canto的办法都急需回到三个Canto;lineTo(卡塔尔国可扶助多行;

  Safari: 苹果的浏览器, 同样是Webkit内核

clearRect()

概念和用法:clearRect(卡塔尔国 方法清空给定矩形内的钦点像素。
JavaScript 语法:context.clearRect(x,y,width,height);

您无需先设定了ink属性再绘制,那总体可以仅在一步中成就:

  Firefox: Mozilla本身研究开发的Gecko内核, JS引擎也是温馨的OdinMonkey

fillStyle 属性

概念和用法:fillStyle 属性设置或回到用于填充摄影的颜色、渐变或方式。
fillStyle 属性设置或回到用于填充美术的颜色、渐变或形式。
JavaScript 语法: context.fillStyle=color|gradient|pattern;
#######strokeStyle 属性
概念和用法:strokeStyle 属性设置或回到用于笔触的水彩、渐变或情势。

canto("canvas_id").moveTo(100,100).lineTo(200,200,100,200).closePath().stroke({lineWidth: 15, strokeStyle: "red"});

1 浏览器对象

  (1) window

  代表全局成效域, 也象征浏览器窗口

    window.innerWidth 展现网页的净宽度

    window.innerHeight 呈现网页的净中度

    window.outerWidth 浏览器整个宽度

    window.outerHeight 浏览器整个中度

  (2) navigator

  代表浏览器音讯

  威尼斯www.9778.com 1

navigator.appName:浏览器名称;

navigator.appVersion:浏览器版本;

navigator.language:浏览器设置的言语;

navigator.platform:操作系统类型;

navigator.userAgent:浏览器设定的User-Agent字符串。

  然而navigator的新闻超轻便就被客户纠正, 所以经常不一致navigator判定浏览器类型等音讯

  日常剖断区别的属性要掀起JavaScript对不真实的剧情不是报错而是再次来到undefined

var width = window.innerWidth || document.body.clientWidth;

  (3) screen  

  表示荧屏消息

  威尼斯www.9778.com 2

screen.width:荧屏宽度,以像素为单位;

screen.height:显示屏高度,以像素为单位;

screen.colorDepth:再次回到颜色位数,如8、16、24。

  (4) location

  代表近些日子页面包车型大巴UKugaL消息

  威尼斯www.9778.com 3

  (5) document

  代表方今页面, 是整个DOM树的根节点

  威尼斯www.9778.com 4

  能够依赖document来赢得页面包车型客车具有标签

  能够透过title来改善页面包车型地铁title

  威尼斯www.9778.com 5

  能够因而getElementById(卡塔尔(قطر‎和getElementsByTagName(卡塔尔等来得到标签对象

  document对象还应该有叁个至极重视的cookie

  库克ie是服务器发送的键值对标记符, 浏览器通过将Cookie发送给服务器, 让服务器认知当前的浏览器, 改革HTTP无状态的意况

威尼斯www.9778.com 6

  由于平常JavaScript也得以读取Cookie, 那样就足够不安全, 为此能够在服务器中装置httpOnly, 那样cookie就无法被JavaScript读取了

  (6) history

  保存了浏览器的历史记录

威尼斯www.9778.com,  能够利用back(卡塔尔国和forward(卡塔尔前行和向下

  然而这种轻巧残忍的方法应该杜绝使用了

Canvas 路径

moveTo(x,y卡塔尔 定义线条开头坐标
lineTo(x,y卡塔尔 定义线条结束坐标
beginPath(卡塔尔国: 起先一条渠道
closePath(卡塔尔(英语:State of Qatar):创设从当前点到起来点的路径。

越来越多介绍:

2 操作DOM

  HTML文书档案被浏览器剖析之后正是风姿浪漫棵DOM树

  对DOM节点有基本的四个操作: 增加和删除改查

  (1卡塔尔常用艺术

    document.getElementById(卡塔尔依据Id, 得到独一元素

    document.getElementsByTagName()重返后生可畏组成分

    document.getElementsByClassName(卡塔尔CSS选用器, 重回风姿罗曼蒂克组成分

  (2) 通过selector选择    

    querySelector(卡塔尔(英语:State of Qatar)可以是document调用, 传入选取器参数

    querySelectorAll(卡塔尔(英语:State of Qatar)能够是获得的要素对象, 传入的平等是选取器参数

圆-->arc()

arc(卡塔尔 方法创立弧/曲线(用于创立圆或一些圆)。
JavaScript 语法:
context.arc(x,y,r,sAngle,eAngle,counterclockwise);

2.1 更新DOM

  (1卡塔尔改良标签内容

    改进标签内容有七个值: innerHTML, innerText, textContent

    innerHTML是获取标签全数内容, 并且能够给其再一次赋值, 赋值的剧情能够饱含有效标签

    威尼斯www.9778.com 7

    innerText获取的是因素对象里面包车型大巴文件音讯, 假如给其重新赋值, 会覆盖原有内容, 不会浮动有效的竹签

    威尼斯www.9778.com 8

    textContent与innerText大约, 只是回去内容的值全体拼接到了黄金年代道

    威尼斯www.9778.com 9

  (2卡塔尔更新标签的特性

    能够直接使用 

标签对象.属性名 = "修改后的值"

    来一向退换内容, 借使原有内容不适合命名准绳, 必要将其转变为驼峰写法

    威尼斯www.9778.com 10

    PS: 增添属性使用setAttribute(属性名, 属性值卡塔尔

2.2 插入DOM

  使用innerHTML就算可以增进一些新的价签走入, 可是会更换原有的原委

  插入DOM首固然有八个章程appendChild()insertBefore(新加盟节点, 标识节点卡塔尔  

  能够应用document.createElement(标具名字卡塔尔国来创立八个标签

  通过setAttribute()和间接操作属性, innerHTML等来改进获得标签

  给head增添style标签如下

var d = document.createElement('style');
d.setAttribute('type', 'text/css');
d.innerHTML = 'p { color: red }';
document.getElementsByTagName('head')[0].appendChild(d);

  新扩张加叁个要素到python成分在此以前

//原来的HTML
//<div id="list">
//  <p id="java">Java</p>
//  <p id="python">Python</p>
//  <p id="scheme">Scheme</p>
//</div>

var
    list = document.getElementById('list'),
    ref = document.getElementById('python'),
    haskell = document.createElement('p');
haskell.id = 'haskell';
haskell.innerText = 'Haskell';
list.insertBefore(haskell, ref);

//新增后的HTML
//<div id="list">
//  <p id="java">Java</p>
//  <p id="haskell">Haskell</p>
//  <p id="python">Python</p>
//  <p id="scheme">Scheme</p>
//</div>

2.3 删除DOM

  删除DOM的艺术是, 先得到要删减的节点, 然后拿到该节点的父节点, 然后调用父节点的removeChild()去除本身

  删除后会有一个重临值, 那几个再次回到值正是被去除的节点, 这一个节点会持续保存在内部存款和储蓄器在那之中, 因而得以经过这些重回值能够将它放到另叁个地点

  可是那又有二个十三分好奇的景况:

  children属性是二个只读属性, 当子节点产生变化的时候会实时更新

  威尼斯www.9778.com 11

  也正是说:

var parent = document.getElementById('parent');
parent.removeChild(parent.children[0]);
parent.removeChild(parent.children[1]); // <-- 浏览器报错

  由此在剔除五个节点的时候, 要注意children时刻都在改换

3 操作表单

  表单本人也是三个DOM树, 由此对表单的操作与DOM相似

  HTML的输入控件日常常有

style="font-family: 'Microsoft YaHei'; font-size: 16px;"> 

  • style="font-family: 'Microsoft YaHei'; font-size: 16px;">文本框,对应的<input type="text">,用于输入文本;

  • style="font-family: 'Microsoft YaHei'; font-size: 16px;">口令框,对应的<input type="password">,用于输入口令;

  • style="font-family: 'Microsoft YaHei'; font-size: 16px;">单选框,对应的<input type="radio">,用于选择风华正茂项;

  • style="font-family: 'Microsoft YaHei'; font-size: 16px;">复选框,对应的<input type="checkbox">,用于选用多项;

  • style="font-family: 'Microsoft YaHei'; font-size: 16px;">下拉框,对应的<select>,用于选拔大器晚成项;

  • style="font-family: 'Microsoft YaHei'; font-size: 16px;">掩没文本,对应的<input type="hidden">,客商不可知,但表单提交时会把隐敝文本发送到服务器。

    style="font-family: 'Microsoft YaHei'; font-size: 16px;">   

  (1卡塔尔平时对表单的操作是安装和获取标签的值, 日常是拿到标签之后选用

标签对象.value;
标签对象.value = 新设置的值;

  来获得或设置

  不过举例radio那样的, 应该获得checked的值来决断状态, 平时的话勾选为true不勾选为false

  (2卡塔尔(قطر‎提交表单

  方法1: 设置一个交付开关, 写触发的点击事件, 获取表单, 用 表单对象.submit(卡塔尔来提交表单

//<form id="test-form">
//  <input type="text" name="test">
//  <button type="button" onclick="doSubmitForm()">Submit</button>
//</form>

function doSubmitForm() {
    var form = document.getElementById('test-form');
    // 可以在此修改form的input...
    // 提交form:
    form.submit();
}

  可是符合规律意况是接受<button type="submit">或许在某些输入框回车的时候提交表单

  方法2: 在表单中加多onsubmit属性, 里面使用"return 考验函数(卡塔尔(قطر‎", 那样在付给函数内部会有多个再次回到值, 当重返为true时表单提交, 重回为假时表单不提交

//<form id="test-form" onsubmit="return checkForm()">
//  <input type="text" name="test">
//  <button type="submit">Submit</button>
//</form>

function checkForm() {
    var form = document.getElementById('test-form');
    // 可以在此修改form的input...
    // 继续下一步:
    return true;
}

  表单注意事项:

    要付出的表单要写好name属性, 从没name属性是不会提交的, 那足以用来不传输明文密码而把原密码加密后给二个hidden的input

4 操作文件

  唯豆蔻梢头能够上传文件的控件是<input type="file">

  当上传文件的时候, 要求将表单的enctype设置为multipart/form-data, methodno必需设置为post

  出于安全性设计, JavaScript是心余力绌赢得文件的真正路线的, 也无法赋值, 可是足以行使value来拿到假的门路, 文件名是常规的

  常常的话都以对上传的文书作贰个项目推断

var f = document.getElementById('test-file-upload');
var filename = f.value; // 'C:fakepathtest.png'
if (!filename || !(filename.endsWith('.jpg') || filename.endsWith('.png') || filename.endsWith('.gif'))) {
    alert('Can only upload image file.');
    return false;
}

  由于JavaScript自个儿对文本的操作轻松, 能够利用File API来获得越来越多文件音讯和一些操作

  HTML5的File API提供了File和FileReader三个首要对象, 能够获取文件音讯并读取文件 

  以DataUKoleosL的样式读取到的文书是叁个字符串, 常用于安装图像, 若是服务器管理, 把字符串base64前面包车型客车字符发送给服务器并用Base64解码就能够拿到原始文本的二进制内容

  JavaScript有多个百般百般百般要害的风味, 正是单线程实践方式

  也正是说, 浏览器在施行JS代码的时候总是以单线程格局试行, 任几时候JS代码都不只怕还要有结余1个线程在实践

  JS管理多职责的措施是运用异步调用, 对于FileReader对象, 就须要先安装二个FileReader对象.onload为一个编辑好的回调函数

  那一个回调函数在FileReader对象完结文件读取之后才会试行, 那就是JS中相比玄妙的异步调用了

  读入贰个图形文件并将图纸和图纸音信展现的实例代码如下:

var
    fileInput = document.getElementById('test-image-file'),//文件获取input
    info = document.getElementById('test-file-info'),//文件信息展示div
    preview = document.getElementById('test-image-preview');//图片展示div
// 监听change事件:
fileInput.addEventListener('change', function () {
    // 清除背景图片:
    preview.style.backgroundImage = '';
    // 检查文件是否选择:
    if (!fileInput.value) {
        info.innerHTML = '没有选择文件';
        return;
    }
    // 获取File引用:
    var file = fileInput.files[0];
    // 获取File信息:
    info.innerHTML = '文件: ' + file.name + '<br>' +
                     '大小: ' + file.size + '<br>' +
                     '修改: ' + file.lastModifiedDate;
    if (file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'image/gif') {
        alert('不是有效的图片文件!');
        return;
    }
    // 读取文件:
    var reader = new FileReader();
    // 设置回调函数
    reader.onload = function(e) {
        var
            data = e.target.result; // 'data:image/jpeg;base64,/9j/4AAQSk...(base64编码)...'            
        preview.style.backgroundImage = 'url(' + data + ')';
    };
    // 以DataURL的形式读取文件:
    reader.readAsDataURL(file);
});

5 AJAX

  AJAX(Asynchronous JavaScript and XML卡塔尔(قطر‎ JavaScript实施异步网络央求

  web运营的规律: 一回HTTP诉求对应叁个页面

  如若急需逗留在当下页面中, 何况还发送HTTP央求, 那就须求采纳JavaScript来发送这么些供给, 就吸收接纳数额后, 在用JavaScript更新页面

  今世的AJAX首借使依附XMLHttpRequest对象, 可是对于低版本的IE, 需求利用ActiveXObjective对象

  不过推断IE版本不要采取navigator不要接受navigator不要接收navigator, 而要抓住JavaScript中的属性空头支票的时候重返undefined

  一般地:

    获取到一个倡议对象, 然后装置对象.onreadystatechange为三个回调函数, 再使用open()函数设置央求, 使用send()函数发送央求

  当中回调函数日常先剖断 对象.readyState==4 代表请求是还是不是做到, 再用status==200肯定是不是是成功响应

  对于open(卡塔尔(英语:State of Qatar), 有四个参数, 分别是发送诉求方式(POST/GET卡塔尔(英语:State of Qatar), ULX570L地址, 是或不是接纳异步(暗许为true卡塔尔(英语:State of Qatar)

  特别注意, 假诺将是还是不是使用异步设置为false, name浏览器会甘休相应等待央浼落成, 假设超越10秒, 浏览器就能够处于叁个诈死状态

  具体的非常版本代码如下:

function success(text) {
    var textarea = document.getElementById('test-response-text');
    textarea.value = text;
}

function fail(code) {
    var textarea = document.getElementById('test-response-text');
    textarea.value = 'Error code: ' + code;
}

// 新建XMLHttpRequest或者Microsoft.XMLHTTP对象
var request;
if (window.XMLHttpRequest) {
    request = new XMLHttpRequest();
} else {
    request = new ActiveXObject('Microsoft.XMLHTTP');
}


request.onreadystatechange = function () { // 状态发生变化时,函数被回调
    if (request.readyState === 4) { // 成功完成
        // 判断响应结果:
        if (request.status === 200) {
            // 成功,通过responseText拿到响应的文本:
            return success(request.responseText);
        } else {
            // 失败,根据响应码判断失败原因:
            return fail(request.status);
        }
    } else {
        // HTTP请求还在继续...
    }
}

// 发送请求:
request.open('GET', '/api/categories');
request.send();

alert('请求已发送,请等待响应...');

  关于安全约束

  对于UTiggoL设置, 要求安装为如今页面完全生龙活虎致的域名的U昂科拉L, 那是浏览器的同源战略

  完全风流洒脱致满含: 域名相似, 契约相通, 端口雷同

  解决同源难点有三种办法:

    1)通过Flash插件来发送HTTP诉求, 但是与Flash交互作用不是很实惠, 当下用得也少

    2卡塔尔(英语:State of Qatar)在同源于域名下, 架设贰个代理服务器, 通过该代理服务器来转载号召

'/proxy?url=http://www.sina.com.cn'

    3卡塔尔JSONP, 只可以动用GET须求, 并且必要回到JavaScript, 实际上是使用浏览器允许跨域引用JavaScript能源来落到实处的

    具体操作方法为:

      用js加多<script>标签, 里面src就是表面包车型地铁援用地址, 然后基于该js再次回到的原委, 设置一个回调函数(日常地, 再次来到值的数据名部分正是回调函数的名字卡塔尔(英语:State of Qatar)

  COXC60S(克罗斯-Origin Resource Sharing卡塔尔 是HTML5正规定义的怎么着跨域访谈财富

  当JavaScript向异国异乡发送央求后, 浏览器会回复央求, 诉求中有Access-Control-Allow-Origin字段, 如若该字段中满含了本域(恐怕为*卡塔尔, 则本次跨域央求成功

  综上所述, 跨域诉求是还是不是中标也许在于诉求的服务器是或不是同意本次跨域, 那也就表明了部分利用应用援用外部的书体的时候, 有希望未有引用成功促成字体设置不正规

  当然对于POST和DELETE等的POST央求, 在发送AJAX央浼以前, 浏览器回头阵送一个OPTIONS伏乞到那么些U奥德赛L上, 询问服务器是或不是采取, 且服务器相应还可能会付出允许的Method

6 Promise

  JavaScript的单线程的风味也就象征JS代码只好是异步推行, 异步试行的话就需求接受回调函数来促成具体职能

  由于在回调中, 会现身有功败北等各个气象的管理结果, 由此须求写种种意况的管理函数, 那样也不便利重用, 现在有三个像样jq中的链式写法

  能够一向在伸手之后直接跟上成功和曲折的管理函数, 这样就无需思谋是还是不是中标与波折, 直接本人调用对应的回调函数了

  Promise是包装实行代码和管理结果, 将其分别

  具体实例如下

// 清除log:
var logging = document.getElementById('test-promise-log');
while (logging.children.length > 1) {
    logging.removeChild(logging.children[logging.children.length - 1]);
}

// 输出log到页面:
function log(s) {
    var p = document.createElement('p');
    p.innerHTML = s;
    logging.appendChild(p);
}

new Promise(function (resolve, reject) {
    log('start new Promise...');
    var timeOut = Math.random() * 2;
    log('set timeout to: ' + timeOut + ' seconds.');
    setTimeout(function () {
        if (timeOut < 1) {
            log('call resolve()...');
            resolve('200 OK');
        }
        else {
            log('call reject()...');
            reject('timeout in ' + timeOut + ' seconds.');
        }
    }, timeOut * 1000);
}).then(function (r) {
    log('Done: ' + r);
}).catch(function (reason) {
    log('Failed: ' + reason);
});

  利用Promise能够将四个设置多个异步职分, 当实施职务1随后再施行职务2, 任何一个任务失利都不会继续实践 

  别的组合使用Promise, 就能够兑现异步职责以相互影响和串行的法门结合起来试行

7 Canvas

  Canvas是HTML5新扩张的零零件, 近似于幕布的功用, 能够在Canvas上绘制种种图片, 动漫等

  能够在Canvas中定义一些HTML标签, 用于在一些浏览器不支持Canvas的时候显得定义好的这几个标签

  Canvas标签包含属性width和height用于定义尺寸大小

  能够经过获取的Canvas对象.getContext(卡塔尔来决断浏览器是还是不是支撑Canvas

  拿到绘图2d照旧3d对象

Canvas对象.getContext("2d") 
Canvas对象.getContext("webgl") 

  Canvas的二维绘图有叁个坐标轴, 0点是左上角, 水平向右是x轴, 垂直向下是y轴

  具体在Canvas上制图叁个海螺红背景的笑颜图像的具体代码如下

var canvas = document.getElementById('mycanvas');
var ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, 200, 200); // 擦除(0,0)位置大小为200x200的矩形,擦除的意思是把该区域变为透明
ctx.fillStyle = '#dddddd'; // 设置颜色
ctx.fillRect(10, 10, 130, 130); // 把(10,10)位置大小为130x130的矩形涂色
// 利用Path绘制复杂路径:
var path=new Path2D();
path.arc(75, 75, 50, 0, Math.PI*2, true);
path.moveTo(110,75);
path.arc(75, 75, 35, 0, Math.PI, false);
path.moveTo(65, 65);
path.arc(60, 65, 5, 0, Math.PI*2, true);
path.moveTo(95, 65);
path.arc(90, 65, 5, 0, Math.PI*2, true);
ctx.strokeStyle = '#0000ff';
ctx.stroke(path);

  绘制文本  

ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.shadowOffsetX = 2;
ctx.shadowOffsetY = 2;
ctx.shadowBlur = 2;
ctx.shadowColor = '#666666';
ctx.font = '24px Arial';
ctx.fillStyle = '#333333';
ctx.fillText('带阴影的文字', 20, 40);

 

本文由威尼斯www.9778.com发布于Web前端技术,转载请注明出处:Canvas

关键词:

苹果Safari升级5.0.1 正式引入第三方插件威尼斯www.9778.com

- 修正了会导致上的登机牌无法正确打印的问题 根据苹果官方在一台2.8GHz Core 2Duo,2GB内存的iMac机型,WindowsVista操作系...

详细>>

Google举世移动搜索占有率惊人:98.29%

借用马云一句很有名的话: 在移动搜索领域,Google架起超高倍射电望远镜也看不到对手在哪里 当你想让iOS 5里的Sir...

详细>>

Perl完全自学手册图文教程

引言 Rakudo Star终于发布了,作为Perl6的第一个实现版····Perl语言上一次发布新版已经是十几年前的事了,很多Perl的...

详细>>

Ext JS 4.2 Grid预览

Calendar Components 社区有很多朋友都问过官方是否也来个Calendar组件.Calendars有个永无休止的问题域: 实现的方法很多, 可...

详细>>