HTML5-canvas1.0
HTML5 <canvas> 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成.<canvas> 标签只是图形容器，您必须使用脚本来绘制图形。你可以通过多种方法使用 canvas 绘制路径,盒、圆、字符以及添加图像。
例子：
注意：标签通常需要指定一个id属性 (脚本中经常引用), width 和 height 属性定义的画布的大小.提示:你可以在HTML页面中使用多个 <canvas> 元素.使用 style 属性来添加边框:
1.使用js绘制图象
2.Canvas坐标
3.Canvas - 路径
在Canvas上画线，我们将使用以下两种方法：
- moveTo(x,y) 定义线条开始坐标
- lineTo(x,y) 定义线条结束坐标
4.
在canvas中绘制圆形, 我们将使用以下方法:arc(x,y,r,start,stop)
5.文本，渐变
6.图象
<body>
<p>Image to use:</p>
<img id="scream" src="img_the_scream.jpg" alt="The Scream" width="220" height="277"><p>Canvas:</p>
<canvas id="myCanvas" width="250" height="300" style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签。</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
img.onload = function() {
ctx.drawImage(img,10,10);
}
</script>
</body>
canvas 的drawImage()方法可以在画布上绘制图象，画布，视频。
也可以绘制图象的某些部分，以及增加或减小图象尺寸
JavaScript 语法 1
在画布上定位图像：
context.drawImage(img,x,y);
JavaScript 语法 2
在画布上定位图像，并规定图像的宽度和高度：
context.drawImage(img,x,y,width,height);
JavaScript 语法 3
剪切图像，并在画布上定位被剪切的部分：
context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
参数值
| 参数 | 描述 |
|---|---|
| img | 规定要使用的图像、画布或视频。 |
| sx | 可选。开始剪切的 x 坐标位置。 |
| sy | 可选。开始剪切的 y 坐标位置。 |
| swidth | 可选。被剪切图像的宽度。 |
| sheight | 可选。被剪切图像的高度。 |
| x | 在画布上放置图像的 x 坐标位置。 |
| y | 在画布上放置图像的 y 坐标位置。 |
| width | 可选。要使用的图像的宽度。（伸展或缩小图像） |
| height | 可选。要使用的图像的高度。（伸展或缩小图像） |
‘
HTML5-canvas1.0的更多相关文章
- 脑洞大开之采用HTML5+SignalR2.0(.Net)实现原生Web视频
目录 对SignalR不了解的人可以直接移步下面的目录 SignalR系列目录 前言 - -,我又来了,今天废话不多说,我们直接来实现Web视频聊天. 采用的技术如下: HTML5 WebRTC Si ...
- web前端－－知识点，笔记叠加（javascript,jquery,html5+css3.0,ajax）
函数传参列表,获取方法arguments的使用 function arg(){ var str = '总共传了'+arguments.length+'个参数\n'; for(var i=0;i< ...
- 2015第9周三html5学习0
之前规划了2015关注的技术方向是html5和node.js,虽然前面也搜集过html5相关的评论介绍性能容,但对如何学习和有哪些可利用要经常的看的资源有明显的界定,刚上网搜索了半个多小时,对结 ...
- java springmvc +spring+ mybaits 模块化开发框架 HTML5+css3.0+bootstrap响应式开发界面
需要源码,请加QQ:858-048-581 系统模块 1. 权限管理:点开二级菜单进入三级菜单显示 角色(基础权限)和按钮权限 角色(基础权限): 分角色组和角色,独立分配菜单权限和增 ...
- Html5 设置菱形链接菜单
本例是采用html5+css3.0设置的菜单链接.其中主要用到了以下几个方面: 1. CSS3.0中的2D变换,如:旋转transform:rotate(45deg);移动,放大transform:r ...
- html5 (个人笔记)
妙味 html5 1.0 <!DOCTYPE html> <html> <head lang="en"> <meta charset=& ...
- Html5 和 CSS的简单应用
本文是利用几个简单的小例子,来实现html+css的简单应用. 菱形链接菜单 本例是采用html5+css3.0设置的菜单链接.其中主要用到了以下几个方面: CSS3.0中的2D变换,如:旋转tran ...
- html5 过程解决问题收集
1.使用画布时报错误: Uncaught TypeError: Object [object Object] has no method 'getContext' . 解决方法: $(function ...
- JavaScript-Clipper.js
Clipper.js下载地址:https://sourceforge.net/projects/jsclipper/files/latest/download使用Javascript Clipper库 ...
- springmvc 多数据源 SSM java redis shiro ehcache 头像裁剪
获取下载地址 QQ 313596790 A 调用摄像头拍照,自定义裁剪编辑头像 B 集成代码生成器 [正反双向](单表.主表.明细表.树形表,开发利器)+快速构建表单; 技术:31359679 ...
随机推荐
- OpenCV学习（一）基础篇
OpenCV 2 计算机视觉编程手册读书笔记1 矩阵创建 Mat类是OpenCV中非常有用类,用来创建和操作多维矩阵.可以有很多方法构造它. // 构造函数 //! constructs 2D mat ...
- .NET并行计算和并发6-获取线程池的最大可用线程数
using System; using System.IO; using System.Security.Permissions; using System.Threading; class Test ...
- 详解Makefile 函数的语法与使用 （转）
使用函数: 在Makefile中可以使用函数来处理变量,从而让我们的命令或是规则更为的灵活和具有智能.make所支持的函数也不算很多,不过已经足够我们的操作了.函数调用后,函数的返回值可以当做变量来使 ...
- awrrpt.sqll生成awr报ORA-06502,ORA-06512
客户环境SumOS操作系统,数据库版本11.2.0.3,rac两节点: 在节点2,执行awr报告,输出报错,有时候可以成功,有时候失败. 报错现象 SQL>@?/rdbms/admin/awrr ...
- Unity用GUI绘制Debug/print窗口/控制台-打包后测试
Unity游戏视窗控制台输出 本文提供全流程,中文翻译. Chinar 坚持将简单的生活方式,带给世人!(拥有更好的阅读体验 -- 高分辨率用户请根据需求调整网页缩放比例) Chinar -- 心分享 ...
- day06 内存地址 小数据池缓存机制
1. 内存相关 示例一 v1=[11,22,33] v2=[11,22,33] #值相等 内存地址不等 v1=11 v2=11 #按理说内存地址应该不等,但是python为了优化使其内存地址相等 v1 ...
- 磁盘操作系统 cmd命令
DOS CMD :磁盘操作系统 不区分大小写 **cd \ 根目录 cls 清空屏幕 dir 显示目录 d: 进入D盘 cd 进入目录命令 dir 查看当前目录的文件与目录 del 删除文件 del ...
- (思维导图搞定)Content-Type：application/json，后台如何接收
自己定的规范:只要Content-Type设置为application/json的时候,前台的data要传递字符串 虽然设置为application/json,前台传对象request.getPara ...
- 用doxygen自动生成文档
1. 添加符合doxygen解析规则的注释 (比如函数说明,函数参数/返回值说明) 用qt-creator可以在函数上方一行键入“/**”,然后直接回车,就可以自动生成默认的格式. 2. 安装doxy ...
- python base64.b64decode 等号可以随便加
由于 = 用在URL,cookie里会造成歧义,所以base64编码的时候,会把 = 自动去掉. 解码的时候,如果传入的二进制编码长度小于4的倍数,那么需要在后面补=,知道满足长度等于4的倍数,然后 ...