【HTML5】Canvas画布
什么是 Canvas?
HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。
画布是一个矩形区域,您可以控制其每一像素。
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
* 添加 canvas 元素。规定元素的 id、宽度和高度:
<canvas id="myCanvas" width="200" height="100"></canvas>
* canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成:
<script type="text/javascript"> //使用 id 来寻找 canvas 元素: var c=document.getElementById("myCanvas"); //创建 context 对象:是内建的 HTML5 对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。 var cxt=c.getContext("2d"); //下面的两行代码绘制一个红色的矩形:fillStyle 方法将其染成红色,fillRect 方法规定了形状、位置和尺寸。 cxt.fillStyle="#FF0000"; cxt.fillRect(0,0,150,75);//意思是:在画布上绘制 150x75 的矩形,从左上角开始 (0,0)。 </script>
** 画线条
效果图:
<!DOCTYPE HTML> <html> <body><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"); cxt.moveTo(10,10); cxt.lineTo(150,50); cxt.lineTo(10,50); cxt.stroke();</script></body> </html>
** 画圆
<!DOCTYPE HTML> <html> <body><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"); cxt.fillStyle="#FF0000"; cxt.beginPath(); cxt.arc(70,18,15,0,Math.PI*2,true); cxt.closePath(); cxt.fill();</script></body> </html>
** 画渐变图形
<!DOCTYPE HTML> <html> <body><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 grd=cxt.createLinearGradient(0,0,175,50); grd.addColorStop(0,"#FF0000"); grd.addColorStop(1,"#00FF00"); cxt.fillStyle=grd; cxt.fillRect(0,0,175,50);</script></body> </html>
** 把一幅图像放置到画布上
<!DOCTYPE HTML> <html> <body><canvas id="myCanvas" width="230" height="180" 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="/i/eg_flower.png" cxt.drawImage(img,0,0);</script></body> </html>
转载于:https://www.cnblogs.com/anni-qianqian/p/5585408.html
【HTML5】Canvas画布相关推荐
- CSS3 渐变新特性和HTML5 Canvas画布背景渐变实现方法详解
CSS3 渐变新特性和HTML5 Canvas画布背景渐变实现方法详解 大家好,又见面了,感觉我上一篇博客对部分同学都挺有帮助的,于是我决定继续写下去,会继续的解析知识点让大家更容易理解,希望能给大家 ...
- php画布怎么清除,JavaScript_JavaScript html5 canvas画布中删除一个块区域的方法,本文实例讲述了html5 canvas画布 - phpStudy...
JavaScript html5 canvas画布中删除一个块区域的方法 本文实例讲述了html5 canvas画布中删除一个块区域的方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 附:图 ...
- html5 图片弹跳,html5 canvas画布里面圆球弹跳动画效果代码
特效描述:html5 canvas 画布 圆球弹跳动画.html5 跳动的球体 代码结构 1. HTML代码 Untitled Document body { margin: 0px; } var i ...
- html5 canvas画布上合成
source-over 默认.在目标图像上显示源图像. source-atop 在目标图像顶部显示源图像.源图像位于目标图像之外的部分是不可见的. source-in 在目标图像中显示源图像.只有目标 ...
- html5画布作品,HTML5 canvas画布
这里创建canvas标签,并定义其id为mycanvas,便于javascript绘图时获取该标签对象. 再看javascript绘图部分: var c=document.getelementbyid ...
- html5 canvas 画布基础
canvas 画布基础 学习整理的笔记,内容丰富 有绘制矩形,绘制线条,绘制二次贝塞尔曲线,绘制弧线等.知识点在代码注释中 效果图: 代码: <!DOCTYPE html> <htm ...
- html5画布作品,HTML5 Canvas 画布(示例代码)
一.Canvas是什么? canvas,是一个画布,canvas元素用于在网页上绘制图形. canvas 拥有多种绘制路径.矩形.圆形.字符以及添加图像的方法. 二.创建Canvas元素 加上基本的属 ...
- html5 canvas画布居中以及例子
今天写一个python前端的时候想把canvas的画布居中,一开始代码是这样的: #scene{ margin:0 auto; } <canvas id="scene" ...
- HTML5 canvas画布元素 制作 动态花朵动画
废话不多说 先上代码 <!doctype> <html> <head> <meta charset="utf-8"> </he ...
- HTML5——Canvas画布绘制图像、绘制线型和绘制图片
一.创建路径 创建路径的步骤: 标识开始创建路径-设置图像属性-(标识结束创建路径)-绘制图像 1.标识路径的方法 beginPath()-表示开始创建路径(不可缺省) closePath()-表示结 ...
最新文章
- Apache Kafka-SpringBoot整合Kafka发送复杂对象
- linux c 服务程序,Linux C 后台服务程序单进程控制
- chrome浏览器开发者工具F12中某网站的sources下的源码如何批量保存?
- MySQL数据库的优化-运维架构师必会高薪技能,笔者近六年来一线城市工作实战经验...
- asp.net mysql所有数据库_asp.net 如何获取sql数据库所有列名称
- nginx作用_云服务器:详解Nginx启用proxy_buffer缓冲
- 从 RNN 到 LSTM (Short-Term Memory)
- win10 nginx文件服务器,Windows10下 FFmpeg + Nginx 的 rtmp 服务器搭建
- (原創) 這學期C++完美的Ending (C/C++) (日記)
- java进度条_Java实现进度条开发过程
- 文件夹病毒残余文件的解决办法
- 配置HP LaserJet M1536dnf MFP打印机通过TCPIP共享多台计算机
- JAVA POJ3233—矩阵幂序列问题
- C++实现化学方程式配平
- GitHub 配置SSH Key
- 为什么有了FineBI后还会有FineReport?这两者的区别真的很大
- CentOS 7报错:Failed to start xxx.service: Unit is masked
- js-面向对象的程序设计,函数表达式
- PostgreSQL 简介
- matlab学习计划11.4
热门文章
- oracle服务说明
- 利用 Linux tap/tun 虚拟设备写一个 ICMP echo 程序
- 4.10/4.11/4.12 lvm讲解 4.13 磁盘故障小案例
- kafka入门介绍(转载)
- QTP和WinRunner区别
- android中的BitMap(二)从网络和资源文件中获得一个BitMap
- Linux dmidecode备忘
- ORA-12514: TNS:监听程序当前无法识别连接描述符中请(转)
- linux 笔记之一mysql源码包安装
- 移动端导出excel_连载系列【4】Excel开发移动端quot;APPquot;