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的当前路径上添加一段弧。和前一个方法相比，知识定义弧的方式不同。
void beginPath() 开始定义路径
void closePath() 关闭前面定义的路径
void bezierCurveTo(float x1,float y1,float x2,float y2,float x,float y) 擦除指定矩形区域上绘制的图形。
void clip() 从画布上裁剪一块出来
CanvasPattern createPattern(Image image,String style) 创建 一个图形平铺
CanvasGradient createLinearGradient(float xStart,float yStart,float xEnd,float yEnd,) 创建一个现行渐变
CanvasGradient createRadialGradient(float xStart,float yStart,float radiusStart,float radiusStart,float xEnd,float yEnd,float radiusEnd) 创建一个圆形渐变

void drawImage(Image image,float x,float y)

void drawImage(Image image,float x,float y,float width,float height)

void drawImage(Image image,integersx,integer sy,integer sw,integer sh,float dx,float dy,float dw,float dh,)

 绘制图形

void fill()

 填充Canvas的当前路径
void fillRect(float x,float y,foat width,float height) 填充一个矩形区域
void filltext(String Text,float x,float y,[[foat maxwidth]) 填充字符串
void lineTo(float x,float y) 把Canvas当前路径当前结束点连接到x、y对应的点
void moveTo(float x,float y) 把Canvas当前路径从结束点连接到x、y对应的点
void quadraticCurveTo(float cpX,float cpY,float x,float y) 向Canvas的当前路径上添加一段二次曲线
void rect(float x,float y,foat width,float height) 向Canvas的当前路径上添加一个矩形
void stroke() 沿着Canvas的当前路径绘制边框
void strokeRect(float x,float y,foat width,float height) 绘制一个矩形边框
void stroketext(String Text,float x,float y,[[foat maxwidth]) 绘制字符串边框
void save() 保存当前的绘图状态
void restore() 恢复之前保存的绘图状态
void rotate(float angle) 旋转坐标系统
void scale(float sx,float sy) 缩放坐标系统
void translate(float dx,float dy) 平移坐标系统
时间： 2024-08-18 19:09:10

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")

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学习笔记（二）——表单1

表单一直是网页必不可少的一部分,一直以来,表单的作用被无限扩展,发展出了诸多新奇的用法,老版的HTML只支持很少的一部分常用表单,许多的新表单都需要借助CSS与JavaScript语言来进行构建,现在HTML5来了,她带来了新的表单,这些强大的表单项,可以省去一大块复杂的JavaScript代码,很值得去学习. 而且在新的表单里面,不再像以前每个表单都必须位于<form></form>之内,只要在<form></form>内定义一个id,然后在网页任何位置都

HTML5 程序设计笔记（二）

Canvas API 1.HTML5 Canvas 概述 1.1 历史 Canvas的概念最初是由苹果公司提出的,用于在Mac OS X WebKit中创建控制板部件(dashboard widget).在Canvas出现之前,开发人员若要在浏览器中使用绘图API,只能使用Adobe的Flash和SVG插件,或者只有IE才支持的VML,以及其他一些稀奇古怪的javascript技巧. SVG和Canvas对比 "Canvas本质上是一个位图画布,其上绘制的图形是不可缩放的,不能像SVG图像那样可

蓝鸥零基础学习HTML5第九讲 兼容性二

蓝鸥零基础学习HTML5第九讲 兼容性二 1.兼容性4 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style> p { width:100px; height:100px; background: red; } </style> </head> <body>

如何在XENDESKTOP7中启用RECEIVER FOR HTML5，允许支持HTML5的浏览器访问虚拟桌面

摘要 Receiver for HTML5托管在StoreFront服务器上,允许用户通过Web浏览器访问虚拟桌面和托管的应用.XenDesktop和XenApp提供的资源聚合在StoreFront Store上,用户通过Receiver for Web site获取.在Web站点上启用Receiver for HTML5,用户无需在他们的设备本地Citrix Receiver即可通过他们的Web浏览器直接访问桌面和应用.本文将讲述如何在XenDesktop7中启用Receiver for HT