给Canvas上下文设置样式

<canvas class="myCanvas" width="700" height="500">
<p>添加恰当的反馈信息。</p>
</canvas>
<script>
var canvas = document.querySelector('.myCanvas');
</script>
  1. fillStyle & strokeStyle
ctx.fillStyle = rgba(0,0,0,0.2);
ctx.fillRect(25,25,25,25); ctx.strokeStyle = rgba(0,0,0,0.2);
ctx.strokeRect(25,25,25,25);
  1. 填充规则(['nonzero'-非零,'evenodd'-奇偶])
ctx.fill("evenodd");
  1. globalAlpha 设置透明度
ctx.strokeStyle = '#000';
ctx.globalAlpha = 0.2
ctx.strokeRect(25,25,25,25);

4.线条样式

  • lineWidth='': 设置线条宽度

  • lineCap=['butt','round','square']: 设置线条末端样式。

  • lineJoin=['bevel','round','miter']: 设定线条与线条间接合处的样式。

  • miterLimit=<number>: 限制当两条线相交时交接处最大长度。默认值是10。

  • setLineDash(segments): 参数是一个数组。一组描述交替绘制线段和间距长度的数字。

  • getLineDash(): 返回一个包含当前虚线样式,长度为非负偶数的数组。

  • lineDashOffset=<float>: 设置虚线样式的起始偏移量。

//eg:创建一个蚂蚁线的效果。它往往应用在计算机图形程序选区工具动效中
var ctx = document.getElementById('.my-canvas').getContext('2d'),offset = 0;
function draw() {
ctx.clearRect(0,0, canvas.width, canvas.height);
ctx.setLineDash([4, 2]);
ctx.lineDashOffset = -offset;
ctx.strokeRect(10,10, 100, 100);
}
(function march() {
offset++;
if (offset > 16) offset = 0;
/*draw();setTimeout(march, 20);*/
setInterval(draw,20)
})();
  1. Gradients设置渐变色
  • createLinearGradient(x1,y1,x2,y2): 直线渐变
  • createRadialGradient(x1,y1,r1,x2,y2,r2): 放射性渐变
  • addColorStop(offset[0~1],color):
//开始圆:圆心(100,100),半径100;结束圆:圆心(100,100),半径30
var gradient = ctx.createRadialGradient(100,100,100,100,100,30);
gradient.addColorStop(0,"white"); //开始圆设白色
gradient.addColorStop(1,"green"); //结束圆设绿色
ctx.fillStyle = gradient;
ctx.fillRect(0,0,200,200);
  1. Patterns设置图案
  • createPattern(img,repeatType['repeat','repeat-x','repeat-y','no-repeat']): 使用指定的图像创建模式
var img = new Image();
img.src = 'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png';
var pattern = ctx.createPattern(img, 'repeat')
ctx.fillStyle = pattern;
ctx.fillRect(0,0,400,400);
  1. Text 设置文本
  • font='CSS value': 设置字体样式的属性。
  • fontAlign=['left','right','center','start','end']: 设置文本的对齐方式。
  • textBaseLine=['top','hanging','middle','alphabetic','ideographic','bottom']: 设置当前文本基线,默认值是 alphabetic。
  • direction=['ltr','rtl','inherit']: 描述当前文本方向
  • measureText(<text>): 返回一个关于被测量文本TextMetrics 对象包含的信息
ctx.font = '48px serif';
ctx.fontAlign = 'end';
ctx.textBaseLine = 'middle';
ctx.direction = 'rtl';
ctx.fillText('Hi!', 150, 50); var text = ctx.measureText("foo"); // TextMetrics object
text.width; // 16;

  1. Shadows设置阴影
  • shadowOffsetX = <float>: 描述阴影水平偏移距离
  • shadowOffsetY = <float>: 描述阴影垂直偏移距离
  • shadowBlur = <float>: 描述模糊效果程度,默认是0
  • shadowColor: 描述阴影颜色
ctx.shadowColor = "black";
ctx.shadowOffsetY = 10;
ctx.shadowOffsetX = 10;
ctx.shadowBlur = 30;
ctx.fillStyle = "green"
ctx.fillRect(10, 10, 100, 100);

JS学习-给Canvas上下文设置样式的更多相关文章

  1. js学习进阶-元素获取及样式设置

    var imgs = document.querySelectorAll("article img"); 获得article元素的直接或间接子孙的所有img元素, <arti ...

  2. Node.js学习记录(一)--安装设置篇

    安装Node window window上安装node可选择以下两种方式: 方式一:直接进入官网下载安装 进入node.js官网点击windows,选择.msi后缀的,根据自己的电脑选择对应的64位或 ...

  3. Cesium.js学习第一天(设置材质)

    var viewer = new Cesium.Viewer('cs'); var entity = viewer.entities.add({ position: Cesium.Cartesian3 ...

  4. amazeui学习笔记--css(基本样式2)--基础设置Base

    amazeui学习笔记--css(基本样式2)--基础设置Base 一.总结 1.盒子模型:外margin,内padding,这里的内外指的边框 2.border-box:Amaze UI 将所有元素 ...

  5. 进阶学习js中的执行上下文

    在js中的执行上下文,菜鸟入门基础 这篇文章中我们简单的讲解了js中的上下文,今天我们就更进一步的讲解js中的执行上下文. 1.当遇到变量名和函数名相同的问题. var a = 10; functio ...

  6. HTML 学习笔记 (canvas 基础)

    1.什么是Canvas canvas就是一个画布,可以进行画任何的线,图形,填充等一系列操作.这一切都是用Js操作的,另外Canvas不仅仅提供简单的二维矢量绘图,也提供了三维的绘图,以及图片处理等一 ...

  7. 我的three.js学习记录(三)

    此次的亮点不是three.js的3d部分,而是通过调用摄像头然后通过摄像头的图像变化进行简单的判断后进行一些操作.上篇中我通过简单的示例分析来学习three.js,这次是通过上一篇的一些代码来与摄像头 ...

  8. WebGL three.js学习笔记 使用粒子系统模拟时空隧道(虫洞)

    WebGL three.js学习笔记 使用粒子系统模拟时空隧道 本例的运行结果如图: 时空隧道demo演示 Demo地址:https://nsytsqdtn.github.io/demo/sprite ...

  9. WebGL three.js学习笔记 加载外部模型以及Tween.js动画

    WebGL three.js学习笔记 加载外部模型以及Tween.js动画 本文的程序实现了加载外部stl格式的模型,以及学习了如何把加载的模型变为一个粒子系统,并使用Tween.js对该粒子系统进行 ...

  10. 【Knockout.js 学习体验之旅】(2)花式捆绑

    本文是[Knockout.js 学习体验之旅]系列文章的第2篇,所有demo均基于目前knockout.js的最新版本(3.4.0).小茄才识有限,文中若有不当之处,还望大家指出. 目录: [Knoc ...

随机推荐

  1. Git命令学习总结(廖雪峰官方Git教程)

        1.Windows系统安装完Git后,需要在Git Bash命令窗口输入以下命令,进行用户名和邮箱设置.

  2. DEV 导出多行头

    //在winfrom 中添加个Gridcontrol 和按钮 public partial class MultTitle : XtraForm { BandedGridView bandedGrid ...

  3. loader的原理

    loader的基本原理 帮助浏览器将不同类型的文件资源转化为浏览器可识别的资源 分类 前置loader: pre 普通loader: normal 内联loader': inline 后置loader ...

  4. linux查看java堆栈信息_linux进程堆栈大小

    1.查看JAVA进程JVM参数 jinfo -flags pid(进程号) -XX:CICompilerCount=2 最大的并行编译数 -XX:InitialHeapSize=16777216 JV ...

  5. JavaSE——subString()方法

    package com.zhao.stringtest;public class Test4 { //手机号屏蔽中间四位 //subString(int beginIndex,int endIndex ...

  6. 基于HttpWebRequest,HttpWebResponse发起请求

    /// <summary> /// 获取版本更新信息 GET /// </summary> /// <param name="softwareKey" ...

  7. pycharm安装appium,通过国内的镜像源安装python包,注意每次都要添加信任选项 --trusted-host mirrors.aliyun.com

    1.更改阿里源   或者清华源 1.file - - settings - -   project - - project interpreter  - - 右侧+  - -  manage  rep ...

  8. GitLab-Runner安装及使用

    Git_Lab CI Setting 根据该教程本地下载并安装 gitlab-runner.exe 在GitLab远程仓库页面点击 setting-> CI/CD ->runner Exp ...

  9. 如何实现基于GPIO按键的长按,短按,双击

    不同的架构实现并不相同,所以我分成了两中:STM32平台和其他平台: STM32平台 首先要分析:该如何判断当前的按键状态:单机和双击是通过在有限时间内是否有新的按动作产生 -- 所以需要一个记录按键 ...

  10. 「postOI」Lost Array

    题意 有一个序列 \(A=\{a_1, a_2, ..., a_n\}\),按如下方式构造一个 \((n + 1) \times (n + 1)\) 的矩阵 \(B\): \(B_{i0}=0\)(\ ...