HTML5 <canvas> 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成.<canvas> 标签只是图形容器，您必须使用脚本来绘制图形。你可以通过多种方法使用 canvas 绘制路径,盒、圆、字符以及添加图像。

例子：

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"> </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的更多相关文章

  1. 脑洞大开之采用HTML5+SignalR2.0(.Net)实现原生Web视频

    目录 对SignalR不了解的人可以直接移步下面的目录 SignalR系列目录 前言 - -,我又来了,今天废话不多说,我们直接来实现Web视频聊天. 采用的技术如下: HTML5 WebRTC Si ...

  2. web前端－－知识点，笔记叠加（javascript,jquery,html5+css3.0,ajax）

    函数传参列表,获取方法arguments的使用 function arg(){ var str = '总共传了'+arguments.length+'个参数\n'; for(var i=0;i< ...

  3. 2015第9周三html5学习0

    ​  之前规划了2015关注的技术方向是html5和node.js,虽然前面也搜集过html5相关的评论介绍性能容,但对如何学习和有哪些可利用要经常的看的资源有明显的界定,刚上网搜索了半个多小时,对结 ...

  4. java springmvc +spring+ mybaits 模块化开发框架 HTML5+css3.0+bootstrap响应式开发界面

    需要源码,请加QQ:858-048-581 系统模块 1.   权限管理:点开二级菜单进入三级菜单显示 角色(基础权限)和按钮权限       角色(基础权限): 分角色组和角色,独立分配菜单权限和增 ...

  5. Html5 设置菱形链接菜单

    本例是采用html5+css3.0设置的菜单链接.其中主要用到了以下几个方面: 1. CSS3.0中的2D变换,如:旋转transform:rotate(45deg);移动,放大transform:r ...

  6. html5 (个人笔记)

    妙味 html5  1.0 <!DOCTYPE html> <html> <head lang="en"> <meta charset=& ...

  7. Html5 和 CSS的简单应用

    本文是利用几个简单的小例子,来实现html+css的简单应用. 菱形链接菜单 本例是采用html5+css3.0设置的菜单链接.其中主要用到了以下几个方面: CSS3.0中的2D变换,如:旋转tran ...

  8. html5 过程解决问题收集

    1.使用画布时报错误: Uncaught TypeError: Object [object Object] has no method 'getContext' . 解决方法: $(function ...

  9. JavaScript-Clipper.js

    Clipper.js下载地址:https://sourceforge.net/projects/jsclipper/files/latest/download使用Javascript Clipper库 ...

  10. springmvc 多数据源 SSM java redis shiro ehcache 头像裁剪

    获取下载地址   QQ 313596790  A 调用摄像头拍照,自定义裁剪编辑头像 B 集成代码生成器 [正反双向](单表.主表.明细表.树形表,开发利器)+快速构建表单;  技术:31359679 ...

随机推荐

  1. UI自动化selenium

    1.什么是UI自动化?模拟人用代码的方式去操作页面2.为什么要做UI自动化?后期迭代的时候,老功能比较多,人工维护成本较大,重复性工作较多,这个时候就考虑因为UI自动化3.什么时候做UI自动化?项目稳 ...

  2. GOPATH

    环境变量 GOPATH 的值可以是一个目录的路径,也可以包含多个目录路径,每个目录都代表 Go 语言的一个工作区(workspace).这些工作区用于放置 Go 语言的源码文件(source file ...

  3. iOS动画学习

    学习一下动画,感谢以下大神的文章:    UIView:基础动画.关键帧动画.转场动画 Core Animation :基础动画,关键帧动画,动画组,转场动画,逐帧动画 CALayer :CALaye ...

  4. 创建Java多线程的两种方式和线程异常

    一.使用多线程的两种方法  使用多线程的两种方法有:继承Thread类和实现runable接口. 二.继承Thread类 来看一下thread类的源代码: class Thread implement ...

  5. 九度OJ-第5章-图论

    二.并查集 1. 例题 题目1012:畅通工程 时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:10519 解决:4794 题目描述: 某省调查城镇交通状况,得到现有城镇道路统计表,表中列出 ...

  6. 关于WebAPI跨域踩到的一点坑

    最近在尝试前后端分离的WebAPI+AngularJS方案,在率先处理授权的时候,踩到了一点WebAPI跨域的坑,其实严格意义上来说也不算是坑吧,只是我自己对WebAPI不熟悉而已,这里我与大家分享一 ...

  7. 19/03/15Pyhon笔记

    1.快速在python中显示目标的2进制写法 bin(342) "0b101010110" 2.一个二进制位就是一比特(bit) 3.Python2默认无法识别中文,需要加文件头 ...

  8. 《DSP using MATLAB》Problem 7.4

  9. 【python接口自动化-requests库】【一】requests库安装

    1.概念 requests 是用Python语言编写,基于 urllib,采用 Apache2 Licensed 开源协议的 HTTP 库.它比 urllib 更加方便,可以节约我们大量的工作,完全满 ...

  10. PythonStudy——三种字符串 Three strings

    # 普通字符串:u'以字符作为输出单位'print(u'abc') # 用于显示 # 二进制字符串:b'' 二进制字符串以字节作为输出单位print(b'abc') # 用于传输 # 原义字符串:r' ...