zoukankan      html  css  js  c++  java
  • 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()方法进行绘制时,所画文本的垂直对齐方式。

            

  • 相关阅读:
    HIHO线段树(成段)
    HIHO 线段树(单点)
    POJ 3468
    HDU 1754
    HDU 1698
    HDU 5119
    HDU 1394
    HDU 1166
    DZY Loves Chessboard
    谷歌Cookies无法写入
  • 原文地址:https://www.cnblogs.com/BlackRian/p/3799786.html
Copyright © 2011-2022 走看看