自学HTML5第四节(canvas画布详解)
canvas画布好像可是说是HTML5的精华了,一定要学好,嗯嗯,绚丽的东西就要从基础的开始。。。。
先看看啥玩意叫做canvas
什么是 Canvas?
HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。
画布是一个矩形区域,您可以控制其每一像素。
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
创建一个canvas
向 HTML5 页面添加 canvas 元素。
规定元素的 id、宽度和高度:
<canvas id="myCanvas" width="200" height="100"></canvas> 矩形的绘制
canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成:
<script type="text/javascript">
var c=document.getElementById("myCanvas"); //使用 id 来寻找 canvas 元素:
var cxt=c.getContext("2d"); //创建 context 对象:getContext("2d") 对象是内建的 HTML5 对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法
cxt.fillStyle="#FF0000"; //代码绘制一个红色的矩形:
cxt.fillRect(0,0,150,75);
</script>
1. fillRect()
2. strokeRect()
线条
通过指定从何处开始,在何处结束,来绘制一条线:
<script type="text/javascript"> var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.stroke(); </script>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas> 1. lineWidth
圆形
<script type="text/javascript"> var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill(); </script>
渐变
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var grd=cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#FF0000");
grd.addColorStop(0.5,"#00FF00");
grd.addCOlorStop(1,"#212121");
cxt.fillStyle=grd;
cxt.fillRect(0,0,175,50);
</script>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
图像
<script type="text/javascript"> var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var img=new Image()
img.src="flower.png"
cxt.drawImage(img,0,0); </script>
自学HTML5第四节(canvas画布详解)的更多相关文章
- 第7.27节 Python案例详解: @property装饰器定义属性访问方法getter、setter、deleter
上节详细介绍了利用@property装饰器定义属性的语法,本节通过具体案例来进一步说明. 一. 案例说明 本节的案例是定义Rectangle(长方形)类,为了说明问题,除构造函数外,其他方法都只 ...
- 第7.25节 Python案例详解:使用property函数定义与实例变量同名的属性会怎样?
第7.25节 Python案例详解:使用property函数定义与实例变量同名的属性会怎样? 一. 案例说明 我们上节提到了,使用property函数定义的属性不要与类内已经定义的普通实例变量重 ...
- 【转】Android Canvas绘图详解(图文)
转自:http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2012/1212/703.html Android Canvas绘图详解(图文) 泡 ...
- 自学Zabbix3.5.1-监控项item-key详解
自学Zabbix3.5.1-监控项item-key详解个人觉得艰难理解,故附上原文档:https://www.zabbix.com/documentation/3.0/manual/config/it ...
- “全栈2019”Java第五十四章:多态详解
难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...
- 零拷贝详解 Java NIO学习笔记四(零拷贝详解)
转 https://blog.csdn.net/u013096088/article/details/79122671 Java NIO学习笔记四(零拷贝详解) 2018年01月21日 20:20:5 ...
- Scratch(四)舞台区详解
在Scratch里面,所有的表现结果都在“舞台区”呈现,前面我们学习的“石头剪刀布”游戏,也是在“舞台区”完成的. 舞台区是非常重要的区域,所以我们今天单独用一个章节来详细说说这个舞台. 既然是一个舞 ...
- 第7.24节 Python案例详解:使用property函数定义属性简化属性访问代码实现
第7.24节 Python案例详解:使用property函数定义属性简化属性访问代码实现 一. 案例说明 本节将通过一个案例介绍怎么使用property定义快捷的属性访问.案例中使用Rectan ...
- 《网页设计基础——CSS的四种引入方式详解》
网页设计基础--CSS的四种引入方式详解 一.行内式: 规则: 1. 行内式是所有样式方法中最为直接的一种,它直接对HTML的标记使用style属性,然后将CSS代码直接写在其中. 格 ...
随机推荐
- 06JS高级创建对象使用原型共享对象方法
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- linux 系统中的特殊文件
特殊文件是UNIX系统中最具特色的文件特性之一.特殊文件也称设备文件.提供用户访问外部设备,而不必知道各种设备的具体操作.UNIX利用特殊文件作为用户与设备文件的接口,使用户能像访问普通文件那样访问特 ...
- Arduino周边模块:传感器部件(温敏、光敏、湿敏)
Arduino周边模块:传感器部件(温敏.光敏.湿敏) Arduino周边模块:传感器部件(温敏.光敏.湿敏) Arduino的模数转换 对于Arduino来说,它只认识数字量,模拟量对其来说就是一门 ...
- jquery实现div垂直居中
<html> <head> <meta charset="UTF-8"> <title></title> <scr ...
- Android Handler之使用小结
在android开发中,使用Handler处理各种消息机制. Handler用于处理和从队列MessageQueue中得到Message.一般我们要重写Handler的handleMessage(Me ...
- MySQL必知必会笔记<1>
[英]ben Forta著 1 1.0 选择数据库 use eg: use 数据库名: 2.0 show命令查看信息: show databases; show tables; show column ...
- Android_打开多个Activity,返回到第一个Activity
正文 一.流程截图 二.问题说明 依次从登录到三级界面,然后退出回到登录界面. 三.解决办法 3.1 实现代码 三级界面调用如下代码: Intent intent = new Inte ...
- distance.c
#include "stdio.h" #include "string.h" #include "math.h" #include &quo ...
- linux的NetworkManager服务
在开启NetworkManager服务的情况下,在终端下敲“service network restart”命令: 正在关闭接口 eth0: 设备状态:3 (断开连接) [确定] 正在关闭接口 eth ...
- fieldset 使用小案例
有初学者问到如何做出如下页面: 对应的代码如下: <fieldset> <legend>★审核状态</legend> <input name="st ...