1、画布

// context.fillStyle=color|gradient|pattern;

/*  1、color:

参数(x,y,width,height)

x,y是左上角起始坐标,后两个参数为宽和高

*/

/*2、gradient

createLinearGradient()方法创建线性的渐变对象.

x0渐变开始点的x坐标,y0渐变开始点的y坐标

x1渐变结束点的x坐标,y1渐变结束点的y坐标

*/

/*

createRadialGradient()方法创建放射状/圆形渐变对象。

x0渐变的开始圆的x坐标

y0渐变的开始圆的y坐标

r0开始圆的半径

x1渐变的结束圆的x坐标

y1渐变的结束圆的y坐标

r1结束圆的半径

*/

/*createPattern()方法在指定的方向内重复指定的元素。

context.createPattern(image,"repeat|repeat-x|repeat-y|no-repeat");

image规定要使用的模式的图片、画布或视频元素。

repeat默认。该模式在水平和垂直方向重复。

repeat-x该模式只在水平方向重复。

repeat-y该模式只在垂直方向重复。

no-repeat该模式只显示一次(不重复)。

*/

推荐阅读更多精彩内容

  • 一:canvas简介 1.1什么是canvas? ①:canvas是HTML5提供的一种新标签 ②:HTML5 ...
    GreenHand1阅读 3,825评论 2 29
  • 一、canvas简介 1.1 什么是canvas?(了解) 是HTML5提供的一种新标签 Canvas是一个矩形区...
    Looog阅读 2,899评论 3 40
  • 【canvas】 《2.6.5 面向对象基础复习补充:》 创建对象的方式: * var o = { name: '...
    夜幕小草阅读 150评论 0 0
  • 一、简介 HTML5 中的定义:“它是依赖分辨率的位图画布,你可以在 canvas 上面绘制任何图形,甚至加载照片...
    destiny0904阅读 6,336评论 1 3
  • 这是关于NFC的收集。http://www.cnblogs.com/guqiangjs/articles/5994...
    oh_flying阅读 173评论 0 0