zoukankan      html  css  js  c++  java
  • js-JavaScript高级程序设计学习笔记12

    第十五章 使用canvas绘图

    1、要使用<canvas>元素,必须先设置其width和height属性

    2、要在这块画布上绘图,需要先取得绘图上下文,取得绘图上下文对象的引用,需要调用getContext()方法并传入上下文的名字,如2d。使用前先对getContext进行能力检测。

    3、使用toDataURL()方法可以导出绘制的图像。

    4、2D上下文。2D上下文的坐标开始于左上角,左上角为(0,0)。

    1、填充和描边。两个属性:fillStylestrokeStyle

    2、绘制矩形。唯一一种可以直接在2d上下文中绘制的形状。与之有关的方法:fillRect()/strokeRect()/clearRect()。接受四个参数:x/y/宽/高。描边线条宽度由lineWidth控制,线条末端形状由lineCap控制,线条相交形状由lineJoin控制。

    3、绘制路径。

    4、文本。textAlign和textBaseline中的值的含义:【给定的点】是文本的【值】。比如textAlign中的start,表示给定的点是文本的start,所以看起来文字靠右。textBaseline中值为top时,表示给定的点是文本的top线,所以文字是靠下的。measureText()方法用于辅助确定文本的大小。

    var fontSize=100;
    context.font=fontSize+"px Arial";
    
    while (context.measureText("Hello World!").width>140) {
        fontSize--;
        context.font=fontSize+"px Arial";
    }

    5、变换。save()方法保存设置和变换,restore()方法调用。先进后出。

    6、绘制图像。drawImage()方法。

    7、阴影。

    8、渐变。渐变的坐标要与绘制的图形坐标相匹配。线性渐变/放射渐变。

    9、模式。模式其实就是重复的图像,可以用来填充或描边图形。调用createPattern()方法创建一个新模式。注意:将填充样式设置为模式对象,指标是在填充区域内显示图像,而不是从填充位置开始绘制图像。图像是从原点开始的。

    10、使用图像数据。通过getImageData()取得原始图像数据,返回的对象是ImageData的实例,有三个属性:width/height/data。data是个数组,保存每个像素的rgba。可利用data使图像彩色变黑白。

    11、合成。会应用到所有绘制操作的属性:globalAlphaglobalCompositionOperation。前者设置全局透明度,后者表示后绘制的图形与已绘制图形的结合方法。

  • 相关阅读:
    Mayan游戏 (codevs 1136)题解
    虫食算 (codevs 1064)题解
    靶形数独 (codevs 1174)题解
    黑白棋游戏 (codevs 2743)题解
    神经网络 (codevs 1088) 题解
    The Rotation Game (POJ 2286) 题解
    倒水问题 (codevs 1226) 题解
    银河英雄传说 (codevs 1540) 题解
    生日蛋糕 (codevs 1710) 题解
    第一章 1.11 高阶函数
  • 原文地址:https://www.cnblogs.com/zczhangcui/p/6141070.html
Copyright © 2011-2022 走看看