html中画布代码,HTML 5 画布(示例代码)

线条：

context.moveTo(40, 40); // 将笔移动到 (40, 40)

context.lineTo(340, 40); // 用笔画线到 (340, 40)

context.stroke(); // 让线条描绘出来

路径：线条除了绘制直线, 还可以勾出路径. 路径是什么? 类似 Photoshop 的线圈工具. 在画布中可以使用 beginPath 和 closePath 两个方法搭配构建路径,

1. 绘制三根线条

context.moveTo(40, 40); // 将笔移动到 (40, 40)

context.lineTo(340, 40); // 用笔画线到 (340, 40)

context.lineTo(340, 100); // 用笔画线到 (340, 100)

context.lineTo(40, 100); // 用笔画线到 (40, 100)

context.stroke(); // 让线条显示出来

2. 在绘制线条之前标记路径结束. 路径将进行闭合：

context.beginPath(); // 开始路径

context.moveTo(340, 40); // 用笔画线到 (340, 40)

context.lineTo(340, 100); // 用笔画线到 (340, 100)

context.lineTo(40, 100); // 用笔画线到 (40, 100)

context.closePath(); // 结束路径

context.stroke(); // 让线条显示出来

3. 填充路径圈定区域.

context.beginPath(); // 开始路径

context.moveTo(340, 40); // 用笔画线到 (340, 40)

context.lineTo(340, 100); // 用笔画线到 (340, 100)

context.lineTo(40, 100); // 用笔画线到 (40, 100)

context.closePath(); // 结束路径

context.fill(); // 让线条显示出来

矩形

绘画矩形有用于勾画矩形和填充矩形使用的两个方法.

context.strokeRect(x, y, width, height); // 只勾画出矩形的外框

context.fillRect(x, y, width, height); // 画出矩形并使用颜色填充矩形区域

圆形

圆形与矩形不同, 没有勾画和填充的方法. 可通过 arc 圈出来的是圆形路径, 再通过前面提及的 stroke 和 fill 方法进行勾画和填充.

context.arc(x, y, radius, startAngle, endAngle, anticlockwise);

圆形

圆形与矩形不同, 没有勾画和填充的方法. 可通过 arc 圈出来的是圆形路径, 再通过前面提及的 stroke 和 fill 方法进行勾画和填充.

context.arc(x, y, radius, startAngle, endAngle, anticlockwise);

这一共有 6 个参数. x 是圆心的横坐标, y 是圆心的纵坐标, radius 是半径, startAngle 是开始画圆的角度, endAngle 是结束画圆的角度, anticlockwise 是画圆方向.

html中画布代码,HTML 5 画布(示例代码)相关推荐

python中延时函数_python中实现延时回调普通函数示例代码
python中实现延时回调普通函数示例代码这篇文章主要给大家介绍了关于python中实现延时回调普通函数的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的 ...
Java EasyExcel在Web网站中读写Excel的方法及示例代码
使用EasyExcel可以更容易简单在Web网站中读写Excel,本文主要介绍在Java Web网站中读写Excel方法及示例代码. 原文地址:Java EasyExcel在Web网站中读写Excel ...
python中实现延时回调普通函数示例代码
这篇文章主要给大家介绍了关于python中实现延时回调普通函数的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧. 回调函 ...
ABOV单片机UART串口通讯中Printf函数实现讲解及示例代码-[MC96F6332D]
一.准备工作 1.KEIL C51编译环境 2.CodeGen8 代码生成器 3.MC96F6332D 开发板 4.USB-OCD II仿真器二.生成串口代码 1.在CodeGen8 代码生成器的外 ...
Java 使用EasyExcel读取Excel中多个sheet方法及示例代码
本文主要介绍Java中,使用EasyExcel读取Excel文件中多个Sheet的方法,以及使用示例代码. 1.读取数据的实体对象 @Data public class DemoData {priva ...
java设置excel标题栏_Java EasyExcel写入Excel中复杂头(head)表中的标题的方法及示例代码...
数据标题示例: 1､实体对象@Data public class ComplexHeadData { @ExcelProperty({"主标题", "字符串标题" ...
ABOV单片机内部中断优先级寄存器IP1x/IPx的设置代码实现讲解及示例代码-[MC96F6332D]
一.准备工作 1.KEIL C51编译环境 2.外部中断EINT示例代码-MC96F6332D 3.MC96F6332D 开发板 4.USB-OCD II仿真器二.代码部分 1.现代单片机MC96F ...
html风车相册代码,Css Html 大风车(示例代码)
简介这篇文章主要介绍了Css Html 大风车(示例代码)以及相关的经验技巧,文章约3675字,浏览量138,点赞数2,值得参考! div{ border-radius: 50%;position: ...
linux mv编写代码,Linux命令--mv(示例代码)
简介这篇文章主要介绍了Linux命令--mv(示例代码)以及相关的经验技巧,文章约4069字,浏览量253,点赞数7,值得推荐! Linux--mv mv经常被用来做备份命令参数: -b :若需覆盖 ...
android访问重定向地址,如何从android中重定向url加载图像(示例代码)
嗨,我正面临这个问题我从RESTCall获取了一个URL 网址是http://hck.re/kWWxUI 但是当我在浏览器中检查时,它会重定向到https://s3-ap-southeast-1.a ...

html中画布代码,HTML 5 画布(示例代码)

html中画布代码,HTML 5 画布(示例代码)相关推荐

最新文章

热门文章