---JS canvas学习笔记

context的fillStyle属性

fillStyle=color | gradient | image | canvas |video

strokeStyle也有上述属性。

1、color:#ffffff | #362 | rgba(100,100,100,0.8) | red

css可以使用的格式在此都可以使用

2、gradient

Linear Gradient

var grd=context.createLinearGradient(xstart,ystart,xend,yend);

Radial Gradient

var grd=context.createRadialGradient(x0,y0,r0,x1,y1,r1);

grd.addColorStop(stop,color);

3、image | canvas | video

createPattern(img,repeat-style)

createPattern(canvas,repeat-style)

createPattern(videa,repeat-style)

repeat-style:no-repeat | repeat-x | repeat-y | repeat

时间: 2024-12-15 15:21:06

---JS canvas学习笔记的相关文章

js/jquery学习笔记

javascript简介 JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言. 不同于服务器端脚本语言,例如PHP与ASP,JavaScript是客户端脚本语言,也就是说JavaScript是在用户的浏览器上运行,不需要服务器的支持而可以独立运行 . JavaScript是一种脚本语言,其源代码在发往客户端运行之前不需经过编译,而是将文本格式的字符代码发送给浏览器由浏览器解释运行.解释语言的弱 点是安全性较差,而且在JavaScript中,如果一条运行不了,那么下面的语

html5 canvas 学习笔记(一)

一.canvas元素API canvas元素并未提供很多API,实际上他只提供了两个属性与三个方法: 1.canvas元素属性 width 属性:与 height 属性: canvas元素绘图表面的宽度,在默认状况下,浏览器会将canvas元素大小设定成与绘图表面大小一致,然而如果在css中覆写了元素大小,那么浏览器则会将绘图表面进行缩放,使之符合元素尺寸.其值为非负整数,默认值为300. 2.canvas元素方法 getContext()方法: 返回与该canvas元素相关的绘图环境对象,每个

[转载]Android Bitmap和Canvas学习笔记

http://blog.chinaunix.net/uid-20771867-id-3053339.html [转载]Android Bitmap和Canvas学习笔记,布布扣,bubuko.com

Canvas 学习笔记1

#Canvas 学习笔记1 @[Canvas,Nunn,HTML5,javascript] ##前言 相信大家多多少少都有了解过`Canvas`,这里我就不多做解释了,网上也充斥了这方面的知识,很多人看了之后,其实发现作用非常小,因为似乎这些东西什么也做不了,本着学习提升自己,造福大家,我打算把我学习`Canvas`的历程记录在这里. 首先推荐大家先看看阮一峰大大写的这个[Canvas API](http://javascript.ruanyifeng.com/htmlapi/canvas.ht

js基础学习笔记(二)

2.1  输出内容(document.write) document.write() 可用于直接向 HTML 输出流写内容.简单的说就是直接在网页中输出内容. 第一种:输出内容用“”括起,直接输出""号内的内容. <script type="text/javascript"> document.write("I love JavaScript!"); //内容用""括起来,""里的内容直接输出.

js基础学习笔记(一)

* 在js编写过程中,尽量保持统一使用单引号 'XXXX': * 所有变量都要声明 var,避免全局函数调用的冲突: 1.1    输出内容 docment.write(‘aileLi’); 改变某ID元素样式 docment.getElementById(‘ID’).style.color=’样式参数’; 1.2   输出弹出框 alert(‘aileLi’); 1.5  什么是变量?  从字面上看,变量是可变的量: 从编程角度讲,变量是用于存储某种/某些数值的存储器. 定义变量使用关键字va

js基础学习笔记(三)

3.1 认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 先来看看下面代码: 将HTML代码分解为DOM节点层次图: HTML文档可以说由节点构成的集合,三种常见的DOM节点: 1. 元素节点:上图中<html>.<body>.<p>等都是元素节点,即标签. 2. 文本节点:向用户展示的内容,如<li>...</li&g

Win8 HTML5与JS编程学习笔记(二)

近期一直受到win8应用的Grid布局困扰,经过了半下午加半个晚上的奋斗,终于是弄明白了Grid布局方法的规则.之前我是阅读的微软官方的开发教程,书中没有详细说明CSS3的布局规则,自己鼓捣了半天也是一头雾水,于是又找到了官方的启蒙教程的布局一张,仔细阅读了一遍,又思考了代码,并在代码的基础上实验,终于是明白了布局方法.官方教程地址是:http://msdn.microsoft.com/zh-cn/library/windows/apps/jj841108.aspx 微软基于CSS3开发了Gri

JS 事件学习笔记(二)

在JS事件学习笔记(一)中学习了事件流.事件处理程序.事件对象以及跨浏览器应该怎么做等知识,现在我们现在来学习浏览器中主要的各种事件. 一. load事件 load事件通常是通过JavaScript代码指定,在window对象上绑定,实际上根据DOM2规定,应该在document上而非window上触发load事件,但是所有浏览器都在window对象上实现了该事件.因此以确保兼容性推荐使用该方法: 另外,在window上发生的事件也可以作为body元素的属性在html代码中添加. load事件的