HTML5 绘制阴影

代码：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">

    <title>绘制阴影</title>
   <script>
       function init()  {
           var canvas=document.getElementById(‘canvas‘);
           var ctx=canvas.getContext("2d");
           ctx.shadowBlur=1.5;
           ctx.shadowColor="red";
           ctx.shadowOffsetX=5;
           ctx.shadowOffsetY=5;
           ctx.strokeStyle="blue";
           ctx.font=" italic 40px 宋体";
           ctx.strokeText("你好",200,200);

       }

   </script>

</head>
<body   >
<canvas  id="canvas" width="400"  height="300"  style="border:2px blueviolet solid"></canvas>
</body>
</html>

　　效果：

2017-09-08 12:36:38

时间： 2024-10-06 12:15:14

HTML5 绘制阴影的相关文章

iOS：quartz2D绘图（给图形绘制阴影）

quartz2D既可以绘制原始图形,也可以给原始图形绘制阴影. 绘制阴影时,需要的一些参数:上下文.阴影偏移量.阴影模糊系数注意:在对绘制的图形做了绘制阴影处理前,需要先对上下文进行保存,绘制阴影成功后,还要对上下文进行复位.目的是为了不影响后面的绘图操作. 举例的阴影绘制实例如下: 1.自定义一个视图类DemoView,并将控制器的视图关联该自定义类,同时在该定义类中重写- (void)drawRect:(CGRect)rect,将绘制无阴影图形和绘制阴影图形的调用方法写在里面.

HTML5 绘制具有颜色和透明度的矩形

作者:卿笃军原文地址:http://blog.csdn.net/qingdujun/article/details/33341413 一.自定义画笔样式如果想为形状图上颜色,需要使用以下两个重要的属性. fillStyle : 设置下来所有fill操作的默认颜色. strokeStyle : 设置下来所有stroke操作的默认颜色. 二.绘制具有颜色和透明度的矩形 <!DOCTYPE html> <html> <head> <meta http-equiv=&

HTML5绘制空心的文本

1.设计源码 <!doctype html> <html> <head> <meta charset="utf-8"> <title>HTML5绘制空心的文本</title> <script type="text/javascript"> /** * 绘制空心的文本 */ function drawHollowText() { //找到<canvas>元素 var can

绘制阴影引发的 iOS 绘图性能问题总结

转自:http://blog.devdlh.com/blog/2013/03/18/performance-problerm-caused-by-shadowpath/ 绘制阴影引发的 iOS 绘图性能问题总结 MAR 18TH, 2013 | COMMENTS 在 iOS 开发中,通过设置 layer 的 shadowColor.shadowOpacity.shadowOffset.shadowRadius 几个属性可以很方便的为 UIView 添加阴影效果.但是前段时间碰到一个问题,在添加了

HTML5 绘制图片

作者:卿笃军原文地址:http://blog.csdn.net/qingdujun/article/details/33344289 一.绘制图像使用drawImage()方法绘制图像.绘图环境提供了该方法的三个不同版本. drawImage(image,x,y) : 在canvas中(x,y)处绘制图片. drawImage(image,x,y,width,height) : 在canvas中(x,y)处绘制图片,并将其缩放到指定的宽度和高度. drawImage(image,source

[转]更优雅地绘制阴影

Box-shadow虽然是一个css3的属性,但由于浏览器支持不错,且用它来营造一种立体感.层次感着实方便,这让它成为了互联网上随处可见的css3特效.不过我感觉想写好阴影不是一件容易的事情.至少我常常摸索半天,写出来的阴影却总让人很难受. 上周在知乎上看到了一个问答,很受启发:如何理解 Material Design 中卡片的两层阴影,于是特意去看了Meterial Design的设计准则(中文翻译),觉得其中的一些设计思想和细节追求很值得我们去借签. 本文标题是“更优雅地绘制阴影”,但其实我

html5 绘制类似墙型的背景

最近开发的项目中要使用html5绘制各种虚线包括贝塞尔虚线.圆形虚线.各种虚线段,还包括各种形式的背景墙,截图如下: 从这张图片中可以看出有很多种形式的虚线和背景墙,下面主要介绍一下墙型背景,如下如: 这中背景图有一定的规律,首先应该绘制一个矩形,填充色为蓝色,然后在矩形上面绘制背景墙. 背景墙的绘制步骤如下: 1.绘制横线 2.绘制竖线 3.进行描边上述三个步骤中不叫麻烦的是绘制竖线,但是如果绘制过下图所示的背景就简单很多了: 这个就是绘制竖线了,设置好的线宽就能看起来很不错了.下面给出绘制

HTML之canvas 8 绘制阴影-绘制文字

绘制阴影 Context.shadowOffetX:阴影横向位移量 Context.shadowOffetY:阴影纵向位移量 Context.shadowColor:阴影颜色 Context.shadowBlur阴影的模糊范围绘制文字 Context.fillStyle=’#00F’; Context.font=”bold 30px sans-serif”; Context.fillText(“hello world”,0,0); Context.strokeText(“hello world

html5 绘制椭圆

最近的项目要使用html5 绘制椭圆,参考网上的例子发现可以使用贝塞尔曲线绘制,不过要绘制四条贝塞尔曲线. 在html5的过程中发现可以使用绘制圆形的方式来绘制椭圆 html5中绘制圆的函数如下: arc(x,y,r,start,end,clockwise);具体函数的含义请自行查看, 实现的具体代码如下: /** * * @param x 中心 x坐标 * @param y 中心 y坐标 * @param a 椭圆 a * @param b 椭圆 b * @param arcStart 起始角