strokeStyle定义和用法

strokeStyle 属性设置或返回用于笔触的颜色、渐变或模式。

context.strokeStyle=color|gradient|pattern;//指示绘图填充色的CSS颜色值|用于填充绘图的渐变对象线性或放射性|用于填充绘图的 pattern 对象

实例 1 绘制一个矩形。使用渐变笔触:

<canvas id="canvas" width=300 height=150></canvas>
<script>
var c=document.getElementById("canvas");
var ctx=c.getContext("2d");
var gradient=ctx.createLinearGradient(100,0,200,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
// 用渐变进行填充
ctx.strokeStyle=gradient;
ctx.lineWidth=10;
ctx.strokeRect(100,25,100,100);
</script>

定义的矩形尺寸100*100,边框宽度为10,实际画出的尺寸是110*110,即总宽= 宽度+边框宽,而非平常盒模型理解的  总宽= 宽度+边框宽*2

实例 2 用一个渐变笔触来写文本 "canvas example"

<canvas id="canvas" width=300 height=150></canvas>
<script>
var c=document.getElementById("canvas");
var ctx=c.getContext("2d");
ctx.font="30px arial";
var gradient=ctx.createLinearGradient(0,0,c.width,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
// 用渐变进行填充
ctx.strokeStyle=gradient;
ctx.strokeText("canvas example",40,80);
</script>

shadowColor、shadowBlur 、shadowOffsetX 、shadowOffsetY

设置阴影的颜色、模糊级别、水平及垂直距离。

context.shadowColor=color;
context.shadowBlur=number;
context.shadowOffsetX=number;
context.shadowOffsetY=number;

实例 1 绘制一个红色矩形红色阴影,模糊级别30

<canvas id="canvas" width=300 height=150></canvas>
<script>
var myCanvas = document.getElementById("canvas");
var cc = myCanvas.getContext("2d");
cc.fillStyle = "#ff0000";
cc.shadowBlur=30;
cc.shadowColor="#ff0000";
cc.fillRect(100,25,100,100);//四个参数分别对应:x,y,w,h
</script>

在没有定义X\Y的阴影偏移时,四边正向放射

在原来 基础上设置X Y 阴影偏移

<canvas id="canvas" width=300 height=150></canvas>
<script>
var myCanvas = document.getElementById("canvas");
var cc = myCanvas.getContext("2d");
cc.fillStyle = "#ff0000";
cc.shadowBlur=30;
cc.shadowOffsetX=15;
cc.shadowOffsetY=15;
cc.shadowColor="#ff0000";
cc.fillRect(100,25,100,100);//四个参数分别对应:x,y,w,h
</script>

shadowOffsetX=0 指示阴影位于形状的正下方。

shadowOffsetX=20 指示阴影位于形状 left 位置右侧的 20 像素处。

shadowOffsetX=-20 指示阴影位于形状 left 位置左侧的 20 像素处。

shadowOffsetY=0 指示阴影位于形状的正下方。

shadowOffsetY=20 指示阴影位于形状 top 位置下方的 20 像素处。

shadowOffsetY=-20 指示阴影位于形状 top 位置上方的 20 像素处。

 

html5 之 canvas 相关知识(三)API-strokeStyle-shadow相关的更多相关文章

  1. html5 之 canvas 相关知识(一)概念及定义

    什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以 ...

  2. HTML5新增Canvas标签及对应属性、API详解(基础一)

    知识说明: HTML5新增的canvas标签,通过创建画布,在画布上创建任何想要的形状,下面将canvas的API以及属性做一个整理,并且附上时钟的示例,便于后期复习学习!Fighting! 一.标签 ...

  3. canvas API ,通俗的canvas基础知识(一)

    在没学canvas的时候,觉得canvas是这么的神秘,这么的绚丽,这么的高深,用canvas做出来的效果是如此的炫酷,能做的事情如此的宽广,简直让我心生敬畏之心,时常感叹:我要是得此技能,必定要上天 ...

  4. python实现单例模式的三种方式及相关知识解释

    python实现单例模式的三种方式及相关知识解释 模块模式 装饰器模式 父类重写new继承 单例模式作为最常用的设计模式,在面试中很可能遇到要求手写.从最近的学习python的经验而言,singlet ...

  5. Canvas学习:封装Canvas绘制基本图形API

    Canvas学习:封装Canvas绘制基本图形API Canvas Canvas学习   从前面的文章中我们了解到,通过Canvas中的CanvasRenderingContext2D对象中的属性和方 ...

  6. 【转载】前端面试“http全过程”将所有HTTP相关知识抛出来了...

    原文:前端面试“http全过程”将所有HTTP相关知识抛出来了... 来一篇串通,一个http全过程的问题,把所有HTTP相关知识点都带过一遍 http全过程 输入域名(url)-->DNS映射 ...

  7. 浅尝HTML5之canvas

    转自:http://segmentfault.com/a/1190000000661407/ HTML5新标签 HTML5新引入header,footer,article,section,aside和 ...

  8. 【Python五篇慢慢弹(5)】类的继承案例解析,python相关知识延伸

    类的继承案例解析,python相关知识延伸 作者:白宁超 2016年10月10日22:36:57 摘要:继<快速上手学python>一文之后,笔者又将python官方文档认真学习下.官方给 ...

  9. listener监听器的相关知识

    从别人的博客上我学习了listener的相关知识现在分享给大家 1.概念: 监听器就是一个实现特定接口的普通java程序,这个程序专门用于监听另一个java对象的方法调用或属性改变,当被监听对象发生上 ...

随机推荐

  1. 求一列的和,awk和perl哪个快?

    下午和群里的朋友争论了一下,有关awk和perl处理文本的速度,自己一直比较推崇perl,对awk知之甚少,结果就想当然的觉得perl快,结果一番争吵后,觉得还是实验一下靠谱,(其实是想证明一下per ...

  2. C# App.config文件的使用

    App.config文件 1. 配置文件概述: 应用程序配置文件是标准的 XML 文件,XML 标记和属性是区分大小写的.它是可以按需要更改的,开发人员可以使用配置文件来更改设置,而不必重编译应用程序 ...

  3. LINUX消息队列实战之一

    前言 能说能抄能论皆不算,能写能打才是真功夫. 唠叨 反正我也是一个孤独的程序猿,多说一些奇奇怪怪的唠叨也无妨,第一次写消息队列,书本的东西和实战很不同,根据实战总结的一些注意事项会和大家分享,也敲打 ...

  4. VB.NET中使用Linq TO SQL添加数据后获得自增长列ID

    VB.NET中使用Linq TO SQL添加数据后获得自增长列ID: Dim tempOrdre As New Order With { .CustomerID = cmbCustomerName.S ...

  5. jQuery UI 多选下拉框插件:jquery-ui-multiselect

    前一个项目,由于项目需求,需要大量使用到下拉多选框,而由于本人又不会写有关 CSS 样式,所以,便上网找到了这个 jQuery 插件:jquery-ui-multiselect .该款插件提供了基本下 ...

  6. 解决Linux下zip文件解压乱码问题

    #!/usr/bin/env python # -*- coding: utf-8 -*- import os import sys import zipfile #print "Proce ...

  7. sqlite3 多线程和锁 ,优化插入速度及性能优化

    一. 是否支持多线程?   SQLite官网上的"Is SQLite threadsafe?"这个问答. 简单来说,从3.3.1版本开始,它就是线程安全的了.而iOS的SQLite ...

  8. 基于RealSense的坐姿检测技术

    计算机的飞速普及,让人们将越来越多的工作放在计算机上去完成,各行各业,尤其是程序开发人员.文字工作者,在计算机上的工作时间越来越长,这种情况下不良的坐姿对颈肩腰椎都会产生很大影响,容易导致多种疾病的发 ...

  9. #定位系统性能瓶颈# strace &amp; ltrace

    strace和ltrace分别相应的是系统调用和库函数调用, 系统调用实际上就是指最底层的一个调用,在linux程序设计里面就是底层调用的意思,面向的是硬件. 而库函数调用则面向的是应用开发的.相当于 ...

  10. Excel设置数据有效性实现单元格下拉菜单的3种方法(转)

    http://blog.csdn.net/cdefu/article/details/4129136 一.直接输入: 1.选择要设置的单元格,譬如A1单元格: 2.选择菜单栏的“数据”→“有效性”→出 ...