博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
html画布Canvas的使用
阅读量:783 次
发布时间:2019-03-25

本文共 713 字,大约阅读时间需要 2 分钟。

html画布Canvas的使用

  • canvas是html5中新增加的元素,用于图形的绘制,通过脚本 (通常是JavaScript)来完成.

  • < canvas> 标签只是图形容器,必须使用脚本来绘制图形。

  • 可以通过多种方法使用 canvas 绘制路径,盒、圆、字符以及添加图像。

    使用步骤:
    1.创建画布:
    注意: 标签通常需要指定一个id属性 (脚本中经常引用), width 和 height 属性定义的画布的大小.

您的浏览器不支持 HTML5 canvas 标签。

2.用JavaScript来绘制图像

  • 首先,找到 < canvas > 元素:
var c = document.getElementById("myCanvas");
  • 创建 context 对象:
    getContext(“2d”) 对象是内建的 HTML5 对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
var ctx = c.getContext("2d");
  • 下面的两行代码绘制一个红色的矩形:
ctx.fillStyle = "#FF0000";ctx.fillRect(0,0,150,75);

代码示例:

     
willow
您的浏览器不支持 HTML5 canvas 标签。

这是我的轨迹

视频:

在这里插入图片描述
在这里插入图片描述在这里插入图片描述

转载地址:http://dzdyk.baihongyu.com/

你可能感兴趣的文章
c学习笔记--3关键字 宏与函数定义
查看>>
c学习笔记--4 循环控制语句 if for while do
查看>>
c学习笔记--5 结构体实现动态链表
查看>>
CTF-web 简介
查看>>
CTF-web 第一部分 MD5
查看>>
CTF-web 第二部分 SQL注入(1)
查看>>
CTF-web 第二部分 SQL注入(2)
查看>>
CTF-web 第二部分 SQL注入(3)
查看>>
CTF-web 第三部分 代码审计
查看>>
CTF-web 第四部分 burp suite使用
查看>>
CSDN喜欢的文章如何转载
查看>>
局域网连接的电脑通过文件共享访问文件
查看>>
局域网电脑使用同一台鼠标键盘控制
查看>>
2018护网杯第一场 web easy tornado LTshop超详细解答
查看>>
CTF-web 第十部分 webshell基础与免杀
查看>>
CTF - WEB redis的简介与利用
查看>>
2018 网鼎杯CTF 第一场
查看>>
linux vscode 安装与配置 简单的程序例子
查看>>
matlab repmat 函数的使用
查看>>
纹理特征描述之自相关函数法 纹理粗糙性与自相关函数的扩展成正比 matlab代码实现
查看>>