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。前者设置全局透明度,后者表示后绘制的图形与已绘制图形的结合方法。

  • 相关阅读:
    << 和>> 的计算公式
    死锁面试题(什么是死锁,产生死锁的原因及必要条件)
    SpringBoot的注解:@SpringBootApplication注解 vs @EnableAutoConfiguration+@ComponentScan+@Configuration
    SpringBoot入门-15(springboot配置freemarker使用YML)
    shiro 登录
    springMVC RedirectAttributes
    IDEA3.5最新版激活码
    求递归算法时间复杂度:递归树
    渐进复杂度
    PL/SQL注册码
  • 原文地址:https://www.cnblogs.com/zczhangcui/p/6141070.html
Copyright © 2011-2022 走看看