html5 之 canvas 相关知识(三)API-strokeStyle-shadow相关
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相关的更多相关文章
- html5 之 canvas 相关知识(一)概念及定义
什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以 ...
- HTML5新增Canvas标签及对应属性、API详解(基础一)
知识说明: HTML5新增的canvas标签,通过创建画布,在画布上创建任何想要的形状,下面将canvas的API以及属性做一个整理,并且附上时钟的示例,便于后期复习学习!Fighting! 一.标签 ...
- canvas API ,通俗的canvas基础知识(一)
在没学canvas的时候,觉得canvas是这么的神秘,这么的绚丽,这么的高深,用canvas做出来的效果是如此的炫酷,能做的事情如此的宽广,简直让我心生敬畏之心,时常感叹:我要是得此技能,必定要上天 ...
- python实现单例模式的三种方式及相关知识解释
python实现单例模式的三种方式及相关知识解释 模块模式 装饰器模式 父类重写new继承 单例模式作为最常用的设计模式,在面试中很可能遇到要求手写.从最近的学习python的经验而言,singlet ...
- Canvas学习:封装Canvas绘制基本图形API
Canvas学习:封装Canvas绘制基本图形API Canvas Canvas学习 从前面的文章中我们了解到,通过Canvas中的CanvasRenderingContext2D对象中的属性和方 ...
- 【转载】前端面试“http全过程”将所有HTTP相关知识抛出来了...
原文:前端面试“http全过程”将所有HTTP相关知识抛出来了... 来一篇串通,一个http全过程的问题,把所有HTTP相关知识点都带过一遍 http全过程 输入域名(url)-->DNS映射 ...
- 浅尝HTML5之canvas
转自:http://segmentfault.com/a/1190000000661407/ HTML5新标签 HTML5新引入header,footer,article,section,aside和 ...
- 【Python五篇慢慢弹(5)】类的继承案例解析,python相关知识延伸
类的继承案例解析,python相关知识延伸 作者:白宁超 2016年10月10日22:36:57 摘要:继<快速上手学python>一文之后,笔者又将python官方文档认真学习下.官方给 ...
- listener监听器的相关知识
从别人的博客上我学习了listener的相关知识现在分享给大家 1.概念: 监听器就是一个实现特定接口的普通java程序,这个程序专门用于监听另一个java对象的方法调用或属性改变,当被监听对象发生上 ...
随机推荐
- 求一列的和,awk和perl哪个快?
下午和群里的朋友争论了一下,有关awk和perl处理文本的速度,自己一直比较推崇perl,对awk知之甚少,结果就想当然的觉得perl快,结果一番争吵后,觉得还是实验一下靠谱,(其实是想证明一下per ...
- C# App.config文件的使用
App.config文件 1. 配置文件概述: 应用程序配置文件是标准的 XML 文件,XML 标记和属性是区分大小写的.它是可以按需要更改的,开发人员可以使用配置文件来更改设置,而不必重编译应用程序 ...
- LINUX消息队列实战之一
前言 能说能抄能论皆不算,能写能打才是真功夫. 唠叨 反正我也是一个孤独的程序猿,多说一些奇奇怪怪的唠叨也无妨,第一次写消息队列,书本的东西和实战很不同,根据实战总结的一些注意事项会和大家分享,也敲打 ...
- VB.NET中使用Linq TO SQL添加数据后获得自增长列ID
VB.NET中使用Linq TO SQL添加数据后获得自增长列ID: Dim tempOrdre As New Order With { .CustomerID = cmbCustomerName.S ...
- jQuery UI 多选下拉框插件:jquery-ui-multiselect
前一个项目,由于项目需求,需要大量使用到下拉多选框,而由于本人又不会写有关 CSS 样式,所以,便上网找到了这个 jQuery 插件:jquery-ui-multiselect .该款插件提供了基本下 ...
- 解决Linux下zip文件解压乱码问题
#!/usr/bin/env python # -*- coding: utf-8 -*- import os import sys import zipfile #print "Proce ...
- sqlite3 多线程和锁 ,优化插入速度及性能优化
一. 是否支持多线程? SQLite官网上的"Is SQLite threadsafe?"这个问答. 简单来说,从3.3.1版本开始,它就是线程安全的了.而iOS的SQLite ...
- 基于RealSense的坐姿检测技术
计算机的飞速普及,让人们将越来越多的工作放在计算机上去完成,各行各业,尤其是程序开发人员.文字工作者,在计算机上的工作时间越来越长,这种情况下不良的坐姿对颈肩腰椎都会产生很大影响,容易导致多种疾病的发 ...
- #定位系统性能瓶颈# strace & ltrace
strace和ltrace分别相应的是系统调用和库函数调用, 系统调用实际上就是指最底层的一个调用,在linux程序设计里面就是底层调用的意思,面向的是硬件. 而库函数调用则面向的是应用开发的.相当于 ...
- Excel设置数据有效性实现单元格下拉菜单的3种方法(转)
http://blog.csdn.net/cdefu/article/details/4129136 一.直接输入: 1.选择要设置的单元格,譬如A1单元格: 2.选择菜单栏的“数据”→“有效性”→出 ...