HTML5-canvas标签
canvas了解
<canvas> 标签定义图形,比如图表和其他图像,您必须使用脚本来绘制图形。在画布上(Canvas)画一个红色矩形,渐变矩形,彩色矩形,和一些彩色的文字。
1、矩形
<canvas id="canvas_rect" width="100px" height="100px" style="border: 2px solid aqua;">您的浏览器不支持 HTML5 canvas 标签。
</canvas>
<script>var rect_canvas = document.getElementById("canvas_rect");var rect_context = rect_canvas.getContext("2d");rect_context.fillStyle = "#FF0000";rect_context.fillRect(0, 0, 60, 60);
</script>
示例解析
- 首先,找到 <canvas> 元素:
var rect_canvas=document.getElementById("canvas_rect");
- 然后,创建 context 对象:
var rect_context=rect_canvas.getContext("2d");
- getContext("2d") 对象是内建的 HTML5 对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
- 下面的两行代码绘制一个红色的矩形:
rect_context.fillStyle="#FF0000";
rect_context.fillRect(0,0,60,60);
设置fillStyle属性可以是CSS颜色,渐变,或图案。fillStyle 默认设置是#000000(黑色)。
fillRect(x,y,width,height) 方法定义了矩形当前的填充方式。
2、线段
在Canvas上画线,我们将使用以下两种方法:
- moveTo(x,y) 定义线条开始坐标
- lineTo(x,y) 定义线条结束坐标
<canvas id="canvas_line" width="100px" height="100px" style="border: 2px solid aqua;">您的浏览器不支持 HTML5 canvas 标签。
</canvas>
<script>var line_canvas = document.getElementById("canvas_line");var line_context = line_canvas.getContext("2d");line_context.moveTo(0, 0);line_context.lineTo(100, 100);line_context.stroke();
</script>
3、圆形
在canvas中绘制圆形, 我们将使用以下方法:
- arc(x,y,r,start,stop)
<canvas id="canvas_arc" width="100px" height="100px" style="border: 2px solid aqua;">您的浏览器不支持 HTML5 canvas 标签。
</canvas>
<script>var arc_canvas = document.getElementById("canvas_arc");var arc_context = arc_canvas.getContext("2d");arc_context.beginPath();arc_context.arc(50, 50, 40, 0, 2 * Math.PI);arc_context.stroke();
</script>
4、文本
使用 canvas 绘制文本,重要的属性和方法如下:
- font - 定义字体
- fillText(text,x,y) - 在 canvas 上绘制实心的文本
- strokeText(text,x,y) - 在 canvas 上绘制空心的文本
var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");ctx.font="30px Arial";ctx.fillText("Hello World",10,50);
5、渐变
渐变可以填充在矩形, 圆形, 线条, 文本等等, 各种形状可以自己定义不同的颜色。
以下有两种不同的方式来设置Canvas渐变:
- createLinearGradient(x,y,x1,y1) - 创建线条渐变
- createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变
var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");// 创建渐变var grd=ctx.createLinearGradient(0,0,200,0);grd.addColorStop(0,"red");grd.addColorStop(1,"white");// 填充渐变ctx.fillStyle=grd;ctx.fillRect(10,10,150,80);
6、图像
把一幅图像放置到画布上, 使用以下方法:
var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");var img=document.getElementById("scream");ctx.drawImage(img,10,10);
HTML5-canvas标签相关推荐
- 使用 HTML5 Canvas 标签的贪吃蛇游戏
https://thoughtbot.com/blog/html5-canvas-snake-game 保罗·詹森 2009 年 12 月 31 日 更新于 2019年3 月 9 日 这篇文章最初发 ...
- HTML5 Canvas标签
Canvas标签(一) 1.概念 (1)HTML5 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成. (2) 标签只是图形容器,您必须使用脚本来绘制图形. 2.用法 2.1 创建一 ...
- html5 Canvas 标签介绍
2019独角兽企业重金招聘Python工程师标准>>> <canvas>元素是在html 中新加的元素, 你要去画图片,线,图片 和其它的的一些东西 ,只用在一个空白的区 ...
- html5是什么材料,HTML_HTML5 Canvas标签使用收录, 一、基本概念
什么是Canva - phpStudy...
HTML5 Canvas标签使用收录 一.基本概念 什么是Canvas 是一个新的 HTML 元素,这个元素在 HTML5 中被定义.这个元素通常可以被用来在 HTML 页面中通过 JavaScri ...
- HTML5 canvas画图
HTML5 canvas画图 HTML5 <canvas> 标签用于绘制图像(通过脚本,通常是 JavaScript). 不过,<canvas> 元素本身并没有绘制能力(它仅仅 ...
- 20 Java程序员面试宝典视频课程之HTML5新标签、功能
一.HTML5认识?(是什么,为什么) 答: 1.HTML5指的是包括 HTML . CSS 和 JavaScript 在内的一套技术组合. 2.HTML4陈旧不能满足日益发展的互联网需要,特别是移动 ...
- html5添加随机率,HTML5 canvas 绘制随机曲线 并实现放大功能
正在开发一个无线监控系统,要显示频率波形图,所以最近一段时间再研究HTML5 canvas 标签,本例实现了根基传经来的数据绘制曲线,并对整个图实行局部放大功能. js代码(canvas_06.js) ...
- canvas 文字颜色_Canvas基本功能Canvas标签
Canvas基本功能 在所有的桌面应用程序的开发平台中几乎都有 Canvas 组件. Canvas组件已经成为绘图组件的代名词. Canvas元素本制裁上是在浏览器中提供一块儿可绘制的区域,JavaS ...
- Div层悬浮实现HTML5 Canvas背景动画
在日常的学习中我接触到一些HTML5 Canvas动画,在开发 tiomg.org 太美在线工具网站 的时候,想将这些震撼或小清新的动画融合到工具网站中,这样可以使原本单调的网页看起来丰富和更有设计感 ...
- html5 canvas api w3c官方中文,HTML5 Canvas 简介
一.使用 Canvas 绘制路径 moveTo(x,y) 定义线条开始坐标 lineTo(x,y) 定义线条结束坐标 使用 stroke() 方法来绘制线条 通过指定从何处开始,在何处结束,来绘制一条 ...
最新文章
- 2022-2028年中国镀金属膜行业市场研究及前瞻分析报告
- 2022-2028年中国ITO薄膜行业市场全景调查及投资前景趋势报告
- Linux中新建用户用不了sudo命令问题:rootr is not in the sudoers file.This incident will be reported解决
- [WCF编程]2.SOA概述
- 局域网内计算机可以互访 无法上互联网,我使用路由器后访问互联网正常,但是网上邻居不能互访,怎么办?...
- 反编译apk文件教程(查看java代码篇)
- TCP协议的三次握手与四次挥手
- 1030 Travel Plan(甲级)
- 转换背景色 html,html – CSS转换:淡化背景颜色,重置后
- 苹果系统使用之输入法的呈现与设置问题
- 腾讯再发股票吸引人才,受益2.57万名员工,人均超8万港元
- 蓝色版去水印小程序源码+接口
- 技术人不会学习,35 岁必然要焦虑!
- 20145234黄斐《信息安全系统设计基础》第十周
- python断点_Python断点()
- ceph12.0.1的源码编译安装
- 提高 Mac OS X 速度的 52 个方法
- 【Python】打印200以内所有素数
- Codeforces Global Round 16 D2. Seating Arrangements (hard version)
- Win7下虚拟机安装Mac OS X
热门文章
- 一些避免竞争条件的实例
- 高通如何通过9008端口读取EMMC的分区
- 编写合格的C代码(1):通过编译选项将特定警告视为错误
- late_time_init
- 带aidl文件的应用程序在android平台源码中的编译
- ZooKeeper之ZkClient使用示例
- hustoj Runtime Error (运行错误)的解决方法
- 无法使用闩锁类型 sh 读取并闩锁页_InnoDB数据锁第2.5部分“锁”(深入研究)...
- python以下导入包的格式错误的是_Python结合Tableau,万字长文搞定传统线下连锁店数据分析...
- 鸿蒙系统首发仪式,鸿蒙系统首发终端荣耀智慧屏正式亮相