原创

HTML5图形绘制

HTML5中的<canvas>标签结合JavaScript可以完成图形的绘制。<canvas>标签是图形容器,使用脚本来绘制绘制路径、盒子、圆、字符等图形。

一个画布在网页中是一个矩形框,通过<canvas>标签来绘制,<canvas>标签默认没有边框和内容,需要使用style属性来添加边框。canvas标签通常需要指定一个id属性(脚本中需要引用),width和height属性定义画布的大小。可以在HTML页面中使用多个<canvas>标签。示例如下。

<!DOCTYPE html>

<html>

<head> 

<meta charset="utf-8"> 

<title>canvas标签</title> 

<style>

body{margin:0;padding:0}

canvas{margin:10px;padding:0px}

</style>

</head>

<body>

<canvas id="myCanvas" width="200" height="200" style="border:1px solid #900;"></canvas>

</body>

</html>

image.png

JavaScript在画布上的绘图需要首先创建画布,然后创建context对象,最后调用相关属性和方法完成绘图。示例如下。

<!DOCTYPE html>

<html>

<head> 

<meta charset="utf-8"> 

<title>JavaScript结合canvas</title> 

</head>

<body>

<canvas id="myCanvas" width="200" height="200" style="border:1px solid #900;">

</canvas>

<script>

var c=document.getElementById("myCanvas");

//找到<canvas>元素

var ctx=c.getContext("2d");

//创建 context 对象

//getContext("2d")是内建的HTML5对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法

ctx.fillStyle="#FF0000";

//设置fillStyle属性可以是CSS颜色,渐变,或图案

//fillStyle 默认设置是#000000(黑色)

ctx.fillRect(0,0,150,75);

//fillRect(x,y,width,height) 方法定义了矩形当前的填充方式

</script>

</body>

</html>

image.png

canvas是一个二维网格,左上角坐标为(0,0)。fillRect(0,0,150,100)是指在画布上绘制150100的矩形,从左上角开始(0,0)。画布上的X和Y坐标用于在画布上对绘画进行定位,鼠标移动的矩形框上,显示定位坐标。

在canvas上绘制路径,需要利用moveTo(x,y)和lineTo(x,y)分别定义路径开始坐标和结束坐标,利用stroke()方法绘制出通过moveTo(x,y)和lineTo(x,y)方法定义的路径,默认颜色是黑色,可以使用strokeStyle属性设置或返回用于笔触的颜色、渐变或模式。

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • HTML5之canvas画板介绍

    • canvas 其实对于HTML来说很简单,只是一个标签元素而已,自己并没有行为,

    十月梦想
  • HTML5-Canvas初探(1)

    双愚
  • 速读原著-Android应用开发入门教程(记录绘制的过程)

    在图形界面的绘制过程中,绘制是一个分阶段的复杂工作,如果可以将某一次绘制的过程纪录,就可以在其他的地方重现这个绘制。 参考示例程序:ApiDemo 的 Pic...

    cwl_java
  • hbase表数据备份策略

    我是攻城师
  • 【玩转Redis面试第2讲】面试官再问Redis事务把这篇文章扔给他

    原子性:一个事务(transaction)中的所有操作,要么全部完成,要么全部不完成,不会结束在中间某个环节。事务在执行过程中发生错误,会被恢复(Rollbac...

    爱笑的架构师
  • 不支持原子性的 Redis 事务也叫事务吗?

    为了确保连续多个操作的原子性,我们常用的数据库都会有事务的支持,Redis 也不例外。但它又和关系型数据库不太一样。

    海星
  • Git 代码防丢指南

    我们在日常使用Git的过程中经常会发生一些意外情况,如果处理不当,则可能会出现代码丢失的假象。本文将针对IDEA&Git日常开发中的一些场景,为你层层拨开迷雾,...

    芋道源码
  • Linux使用笔记4-添加用户变量(设置自己的命令,修改默认python版本等)

    使用linux服务器时,我们需要设置自己的用户变量,以添加自己的命令,或者用自己的软件版本替代系统默认的版本,方便自己的使用。在自己home下有个.bashrc...

    锦小年
  • Git代码防丢指南

    我们在日常使用Git的过程中经常会发生一些意外情况,如果处理不当,则可能会出现代码丢失的假象。本文将针对IDEA&Git日常开发中的一些场景,为你层层拨开迷雾,...

    joymufeng
  • 填满Github的绿色格子用我做的VSCode插件-Auto Commit

    如果提交到其他分支,提交记录不会显示在绿色的格子里面,合并分支之后 才会显示在绿色格子里面。

    OBKoro1

扫码关注云+社区

领取腾讯云代金券