HTML5的绘画支持(四)

绘画 :设置阴影

<html>
<body>
<h2>画图入门</h2>
<canvas id="mc" width="600" height="280" style="border:1px solid black"></canvas>
<script>
var canvas=document.getElementById("mc");
var ctx=canvas.getContext("2d");
ctx.shadowBlur=5.6;
ctx.shadowColor="#222";
ctx.shadowOffsetX=10;
ctx.shadowOffsetY=-6;
ctx.fillStyle="#0ff";
ctx.font="italic 50px 隶书";
ctx.textBaseline="top";
ctx.fillText("设置阴影测试",0,0);
ctx.font="bold 45px 宋体";
ctx.strokeText("绘制字符串的边框",0,50);
ctx.fillRect(20,150,180,80);
ctx.lineWidth=8;
ctx.strokeRect(300,150,180,80);
</script>
</body>
</html>

时间: 2024-10-11 11:51:56

HTML5的绘画支持(四)的相关文章

HTML5的绘画支持(六)

绘画:lineTo示意 <html> <head> <title></title> </head> <body> <h2>lineTo示意</h2> <canvas id="mc" width="480" height="380" style="border:1px solid black"></canvas>

HTML5的绘画支持(五)

绘画:使用路径-绘制圆形 <html><body><h2>画图入门</h2><canvas id="mc" width="600" height="280" style="border:1px solid black"></canvas><script>var canvas=document.getElementById("mc&qu

HTML5的绘画支持(一)

1.使用canvas元素 HTML5新增了一个<canvas.../>元素,该元素专门用于绘制图形.但实际上<canvas.../>元素自身并不绘制图形,它只是相当于一张空画布.必须要用javascript脚本进行绘制. 在html页面上定义<canvas.../>与定义其它普通元素并无任何不同,为了向<canvas.../>元素上绘图,必须经过如下三个步骤: 1.获取<canvas.../>元素对应的dom对象,这是一个canvas对象. 2.

HTML5的绘画支持(三)

绘图:绘制几何图形 <html><body><h2>画图入门</h2><canvas id="mc" width="300" height="280" style="border:1px solid black"></canvas><script>var canvas=document.getElementById("mc"

HTML5的绘画支持(二)

绘图(一)       CanvasRenderingContext2D提供的方法 方法签名 简要说明 void arc(float x,float y,float radius,float startAngle,float endAngle,boolean counterlockwise) 向Canvas的当前路径上添加一段弧 void arcTo(float x1,float y1,float x2,float y2,float radius,) 向Canvas的当前路径上添加一段弧.和前一

HTML5 学习总结(四)——canvas绘图、WebGL、SVG

HTML5 学习总结(四)--canvas绘图.WebGL.SVG 目录 一.Canvas 1.1.创建canvas元素 1.2.画线 1.3.绘制矩形 1.4.绘制圆弧 1.5.绘制图像 1.6.绘制文字 1.7.随机颜色与简单动画 二.WebGL 2.1.HTML5游戏开发 2.2.1.Cocos2D-HTML5 2.2.2.Egret(白鹭引擎) 三.SVG 3.1.SVG Hello Wrold 3.2.多种引入SVG的方法 3.3.画直线 3.4.画椭圆 3.5.文本与矩形 3.6.向

Html5 学习系列(四)文件操作API

原文:Html5 学习系列(四)文件操作API 引言 在之前我们操作本地文件都是使用flash.silverlight或者第三方的activeX插件等技术,由于使用了这些技术后就很难进行跨平台.或者跨浏览器.跨设备等情况下实现统一的表现,从另外一个角度来说就是让我们的web应用依赖了第三方的插件,而不是很独立,不够通用.在HTML5标准中,默认提供了操作文件的API让这一切直接标准化.有了操作文件的API,让我们的Web应用可以很轻松的通过JS来控制文件的读取.写入.文件夹.文件等一系列的操作,

html5中不再支持table的cellspacing和cellpadding属性

如果你现在开始用html5的声明来写页面时,你会发现在定义table的cellspacing和cellpadding时被提示该属性已过时或者提示非法属性.具体原因是在html5中table标签的这两个属性已经被移除,需要定义边框之类的时应该使用css的写法. 具体实现如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Html5 Tab

html5中不再支持的元素

html5中不再支持的元素:1.acronym(建议abbr) : 定义首字母缩写2.applet(建议object): 定义 applet3.basefont(使用css控制)4.big(使用css控制) :定义大号文本5.center(使用css控制): 定义居中的文本6.font(使用css控制)7.strike(使用del) :定义加删除线的文本8.tt(使用css控制): 定义打字机文本.9.u(使用css控制) :定义下划线文本10.frame(建议iframe): 定义子窗口(框架