html5 canvas 学习笔记(一)

一、canvas元素API

   canvas元素并未提供很多API,实际上他只提供了两个属性与三个方法:

    1、canvas元素属性

      width 属性:与 height 属性:

       canvas元素绘图表面的宽度,在默认状况下,浏览器会将canvas元素大小设定成与绘图表面大小一致,然而如果在css中覆写了元素大小,那么浏览器则会将绘图表面进行缩放,使之符合元素尺寸。其值为非负整数,默认值为300.

    2、canvas元素方法

      getContext()方法:

        返回与该canvas元素相关的绘图环境对象,每个canvas元素均有一个这样的环境对象,而且每个环境对象均与一个canvas元素相关联。

      toDataURL(type,quality)方法:

        返回一个数据地址(data URL),你可以将他设定为img与元素的src属性值。第一个参数指定了图像的类型,例如 image/jpeg或image/png,如果不指定第一个参数,则默认使用image/png。第        二个参数必须是0~1.0之间的double值,他表示JPEG图像的显示质量。

      toBlob(callback,type,args...)

        创建一个用于表示此canvas元素图像的Blob。第一个参数是一个回调函数,浏览器会以一个指向blob的引用为参数,去调用该回调函数。第二个参数以“image/png”这样的形式来指定图像类型。如果        不指定,则默认使用“image/png”最后一个参数是介于0.0~1.0之间的值,表示JPEG图像的质量。将来很可能会加入其他一些用于精确调控图像属性的参数

二、canvasrendingcontext2D对象所含的属性

    canvas  指向该绘图环境所属的canvas对象。该属性最常见的的用途就是通过它来获取canvas的宽度与高度,分别调用context.canvas.width与context.canvas.height即可

    fillstyle  指定改绘图环境在后续的图形填充操作中所使用的颜色、渐变色或图案

    font   指定在调用绘图环境对象的fillText()或strokeText()方法时,所使用的字型。

    globalAlpha  全局透明度设定

    globalCompsiteOperation 该值觉得了浏览器将某个物体绘制在其他物体之上时,所采用的绘制方式。

    lineCap 该值告诉浏览器如何绘制线段的端点,可以指定的值为butt、round、及square。默认值是butt。

    lineWidth 该值决定了canvas之中绘制线段的屏幕像素宽度。它必须是个非负、非无穷的double值。

    lineJoin  告诉浏览器在两条线段相交是如何绘制焦点,可取的值是:bevel、round miter 默认值是miter。

    miterLimit  告诉浏览器如何绘制miter形式的线段焦点

    shadowBlur  该值决定了浏览器该如何延伸阴影效果。值越高,阴影效果延伸得就越远。 默认值是0。

    shadowColor  该值告诉浏览器使用何种颜色来绘制阴影。通常采用半透明色作为该属性的值,以便让后面的背景能显示出来

    shadowOffsetX  以像素为单位,指定阴影效果的水平方向偏移量

    shadowOffsetY  以像素为单位,指定阴影效果的垂直方向偏移量

    strokeStyle  指定了对路径进行描边是所用的绘制风格。该值可被设定为某个颜色,渐变色或图案。

    textAlign  决定了以fillText()或strokeText()方法进行绘制时,所画文本的水平对其方式。

    textBaseline  决定了fillText()或strokeText()方法进行绘制时,所画文本的垂直对齐方式。

        

html5 canvas 学习笔记(一),布布扣,bubuko.com

时间: 2024-10-24 12:15:32

html5 canvas 学习笔记(一)的相关文章

HTML5 Canvas 学习笔记(canvas绘制线条、矩形、多边形、圆形、圆环、组合图形、文字、自定义图像)

学习资源:http://www.w3school.com.cn/html5/html_5_canvas.asp   http://blog.csdn.net/clh604/article/details/8536059   http://www.jb51.net/html5/70307.html 一.对 canvas 的理解 <canvas>标签是 HTML5 中的新标签,像所有的 dom 对象一样它有自己本身的属性.方法和事件. canvas 是用来在网页上绘制图形的(我们通常称之为画布),

HTML5 CANVAS学习笔记(一)

<!doctype html> <html> <head> <meta charset="UTF-8"> </head> <style type="text/css"> canvas{border:dashed 2px #CCC} </style> <script type="text/javascript"> function pageLoad(){

Canvas 学习笔记1

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

HTML5+Bootstrap 学习笔记 4

HTML5 <map> <area> 标签 <map> 标签定义客户端的图像映射.图像映射是带有可点击区域的图像. <area> 标签定义图像映射内部的区域(图像映射指的是带有可点击区域的图像). area 元素始终嵌套在 <map> 标签内部. 1 <img src ="planets.gif" alt="Planets" usemap ="#planetmap" /> 2

[HTML5 Canvas学习]使用颜色和透明度

在canvas中使用颜色和透明度,通过context的strokeStyle和fillStyle属性设置,strokeStyle和fillStyle的值可以是任意有效的css颜色字串.可以用RGB.RGBA.HSL.HSLA以及十六进制RGB标注来指定颜色,也可以通过 "yellow"."silver"."teal"这样的颜色名称来指定.除此之外,还可以使用SVG1.0规范中的颜色名称,比如"goldenrod"."

[HTML5 Canvas学习]绘制矩形

1.使用strokeRect和fillRect方法绘制矩形 a.strokeRect是绘制一个不填充的矩形 b.fillRect是绘制一个填充的矩形 代码: <script> var canvas = document.getElementById('canvas'), context = canvas.getContext('2d'); context.lineJoin = 'round'; context.lineWidth = 20; context.strokeRect(10, 10,

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

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

【HTML】【学习】 Canvas学习笔记【上】

Canvas是HTML新增的开发跨平台动画和游戏的标准解决方案,能够实现对图像和视频进行像素级操作. 一.在页面中添加canvas元素 就像添加一个普通div一样,canvas的添加方式为: <canvas id = "myCanvas" width = "200px" height = "100px">不支持时显示的部分</canvas> 可以用对div添加样式的方法使用CSS对Canvas添加样式 二.使用Canvas

【HTML】【学习】 2、Canvas学习笔记【上】

Canvas是HTML新增的开发跨平台动画和游戏的标准解决方案,能够实现对图像和视频进行像素级操作. 一.在页面中添加canvas元素 就像添加一个普通div一样,canvas的添加方式为: <canvas id = "myCanvas" width = "200px" height = "100px">不支持时显示的部分</canvas> 可以用对div添加样式的方法使用CSS对Canvas添加样式 二.使用Canvas