HTML5 给图形绘制阴影(绘制五角星示例)
几个属性
- shadowOffsetX:阴影的横向位移量。
- shadowOffsetY:阴影的纵向位移量。
- shadowColor:阴影的颜色。
- shadowBlur:阴影的模糊范围。
属性说明
- shadowOffsetX,shadowOffsetY默认值为零
- shadowBlur属性是可选的。如果你不希望阴影的边缘太清晰,需要将阴影的边缘模糊化时使用该属性。设定该属性值时必须设定为比零大的数字,否则将被忽略。一般设定在0-10之间。
例:绘制五角星
<!DOCTYPE html>
<html>
<head>
<title>给图形绘制阴影</title>
<script type="text/javascript">
function draw(id) {
var canvas = document.getElementById(id);
if(canvas == null)
return false;
var context = canvas.getContext('2d');
context.fillStyle = "#eeeeff";
context.fillRect(0,0,400,300);
context.shadowOffsetX = 10;
context.shadowOffsetY = 10;
context.shadowColor = 'rgba(100,100,100,0.5)';
context.shadowBlur = 7.5;
//图形绘制
context.translate(0,0);
for (var i = 0; i < 3; i++) {
context.translate(60,50);//偏的方向
creat5Star(context);
context.fill();
};
}
function creat5Star(context) {
var n = 0;
var dx = 0;
var dy = 0;
var s = 50;
//创建路径
context.beginPath();
context.fillStyle = 'rgba(255,0,0,0.5)';
var x = Math.sin(0);
var y = Math.cos(0);
var dig = Math.PI/5*4;//改变形状
for (var i = 0; i < 5; i++) {
var x = Math.sin(i*dig);
var y = Math.cos(i*dig);
context.lineTo(dx+x*s,dy+y*s);
};
context.closePath();
} </script>
</head>
<body onload="draw('canvas');">
<h1>canvas元素示例</h1>
<canvas id="canvas" width="400" height="300"></canvas>
</body>
</html>
HTML5 给图形绘制阴影(绘制五角星示例)的更多相关文章
- HTML5 Canvas ( 图形的阴影 ) shadowColor, shadowOffsetX, shadowOffsetY, shadowNlur
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- Matlab绘图基础——其他三维图形(绘制填充的五角星)
其他三维图形 %绘制魔方阵的三维条形图 subplot(2,2,1); bar3(magic(4)); %以三维杆图形式绘制曲线y=2sin(x) subplot(2,2,2); y=2*sin( ...
- iOS:quartz2D绘图(给图形绘制阴影)
quartz2D既可以绘制原始图形,也可以给原始图形绘制阴影. 绘制阴影时,需要的一些参数:上下文.阴影偏移量.阴影模糊系数 注意:在drawRect:方法中同时调用绘制同一个图形时,在对绘制的图形做 ...
- Canvas 给图形绘制阴影
/** * 图形绘制阴影 */ function initDemo6() { var canvas = document.getElementById("demo6"); if ( ...
- HTML5 绘制阴影
代码: <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8 ...
- html5--5-15 绘制阴影
html5--5-15 绘制阴影 实例 <!doctype html> <html> <head> <meta charset="utf-8&quo ...
- iOS的阴影绘制及性能优化
今天来讲讲iOS开发过程中的阴影绘制及其潜在的绘图性能问题.虽然在开发过程中,我们使用阴影功能的机会不是很多,但是如果用了,有可能引起如卡顿等性能问题,所以,还是有必要来探究一下阴影的绘制过程,及如何 ...
- 借助Photoshop,Illustrator等设计软件进行WPF图形图像的绘制
原文:借助Photoshop,Illustrator等设计软件进行WPF图形图像的绘制 本文所示例子是借助第三方设计软件,制作复杂的矢量图形,转成与XAML酷似的SVG,再转换成xaml而实现的. 这 ...
- OpenGL(一)绘制圆、五角星、正弦曲线
OpenGL入门之"顶点":OpenGL规定,一个多边形必须是一个"凸多边形",即连接多边形上任意两点,其连线都在多边形内部.多边形可以由其边上的端点(这里可称 ...
随机推荐
- 配置KindEditor富文本编辑器
第一步:首先我们要到KindEditor官网下载资源包-点击进入官网下载KindEditor资源包 第二部:在下载完了KindEditor的资源包后解压结构如下图所示: 里面包括集中语言的文件上传后台 ...
- 自己动手编写IOC框架(三)
刚写博客浏览量第一天就有1000多人次,给了我很大的鼓舞决定熬夜再写一篇.对于前两篇来说无非就是使用dtd验证xml,然后解析xml,和IOC的核心还是差的很远,相信很多小伙伴们都感觉看得不过瘾了,这 ...
- 拆分字符and读取properties文件
在方法里面建立properties对象 Properties pps = new Properties(); 调用.load()方法 pps.load(new FileInputStream(&quo ...
- 51Nod 1293 球与切换器 DP分类
基准时间限制:1 秒 空间限制:131072 KB 有N行M列的正方形盒子.每个盒子有三种状态0, -1, +1.球从盒子上边或左边进入盒子,从下边或右边离开盒子.规则: 如果盒子的模式是-1,则 ...
- 匈牙利标记法定义ECMAScript变量前缀
匈牙利标记法定义ECMAScript变量前缀 类型 前缀 示例 数组 a aArray 布尔型 b bMale 浮点型(数字) f fTax 函数 fn fnSwap 整型(数字) i iAge ...
- python掉微信api
# -*- coding:utf-8 -*-import requestsimport jsonimport sys# 企业号及应用相关信息corp_id = 'xxxx'corp_secret = ...
- wps 操作
wps选择视图-->文档结构图
- oracle自己主动维护
检查ORACLE自己主动维护任务是否关闭 SQL> select t.client_name, t.status from dba_autotask_client t; CLIENT_NAM ...
- 彻底弄懂 JavaScript 执行机制
本文的目的就是要保证你彻底弄懂javascript的执行机制,如果读完本文还不懂,可以揍我. 不论你是javascript新手还是老鸟,不论是面试求职,还是日常开发工作,我们经常会遇到这样的情况:给定 ...
- ASP.MVC当URL跳转时候参数的安全性
一个页面跳转到另外一个页面直接将参数写在URL上面并不安全比如 http://XXXXXXXXXXX/meeting/shakeGroup?id=5381&uid=o0En_sj1J0bFgI ...