1. 由于canvas画布在网页中, 所以需要在html中添加canvas标签:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <!-- 创建一个宽300px, 高300px的画布环境 -->

    <canvas id="c1" width="300" height="300"></canvas>

</body>

</html>

2. 我们需要控制这个画布, 在画布里面绘制图形, 这时就需要通过js控制:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <canvas id="c1" width="300" height="300"></canvas>

    <script>

        var canvas = document.getElementById("c1");

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

        ctx instanceof CanvasRenderingContext2D; // true

    </script>

</body>

</html>

完成了上面两步以后就可以认为是初始化了一个画布(canvas)环境.

怎样创建一个canvas画布环境的更多相关文章

  1. 用canvas画布画一个画板

    前段时间,在对H5的回顾中突然对canvas有了感觉,闲来无事便对其进行了一些捯饬.这不,上周我还做了一个好玩的画板呢,废话不多说,直接上代码(PS:翠花,上代码~): HTML部分: <!DO ...

  2. django examples 学习笔记(1)创建一个独立的python环境

    pip install virtualenv   创建一个虚拟环境 virtualenv   my_env      创建一个独立的环境 source my_env/bin/activate   激活 ...

  3. canvas画布标签

    最近良师益友整理一些canvas的资料,加强学习了解! 当你创建一个<canvas>元素后,就拥有了它的绘图上下文. 一.简单图形 1.getContext()方法 为了在canvas上绘 ...

  4. 自学HTML5第四节（canvas画布详解）

    canvas画布好像可是说是HTML5的精华了,一定要学好,嗯嗯,绚丽的东西就要从基础的开始.... 先看看啥玩意叫做canvas 什么是 Canvas? HTML5 的 canvas 元素使用 Ja ...

  5. 小教程：自己创建一个jQuery长阴影插件

    长阴影设计是平面设计的一个变体,添加了阴影,产生了深度的幻觉,并导致了三维的设计.在本教程中,我们将创建一个jQuery插件,通过添加完全可自定义的长阴影图标,我们可以轻松地转换平面图标. 戳我查看效 ...

  6. Docker实战之创建一个tomcat容器

    一.Docker与虚拟机的区别 二.Docker学习步骤 2.1:安装宿主操作系统 在VMVare中安装了Ubuntu 16.04.2 LTS (GNU/Linux 4.4.0-62-generic ...

  7. 用html5的canvas和JavaScript创建一个绘图程序

    本文将引导你使用canvas和JavaScript创建一个简单的绘图程序. 创建canvas元素 首先准备容器Canvas元素,接下来所有的事情都会在JavaScript里面. <canvas ...

  8. Particles.js基于Canvas画布创建粒子原子颗粒效果

    文章目录 使用方法 自定义参数 相关链接 Particles.js是一款基于HTML5 Canvas画布的轻量级粒子动画插件,可以设置粒子的形状.旋转.分布.颜色等属性,还可以动态添加粒子,效果非常炫 ...

  9. ZeroMQ接口函数之 ：zmq_ctx_new – 创建一个新的ZMQ 环境上下文

    ZeroMQ 官方地址 :http://api.zeromq.org/4-0:zmq_ctx_new zmq_ctx_new(3)               ØMQ Manual - ØMQ/3.2 ...

随机推荐

  1. JAVA基础知识|进程与线程

    一.什么是进程?什么是线程? 操作系统可以同时支持多个程序的运行,而一个程序可以狭义的认为就是一个进程.在一个进程的内部,可能包含多个顺序执行流,而每个执行流就对应一个线程. 1.1.进程 进程:是计 ...

  2. mysql索引分类

    mysql索引分类 一.总结 一句话总结: 主键索引:设定为主键后数据库会自动建立索引,innodb为聚簇索引 单值索引:一个索引只包含单个列,一个表可以有多个单列索引:CREATE INDEX id ...

  3. vue 调用微信支付方法

    pay(){ let data ={ order_id:this.order_id, wechatpay_type:this.wechatpay_type, merchant_id:localStor ...

  4. Hibernate fetch相关

    fetch=FetchType.LAZY 时,spring boot jackson 返回数据时会出错. 可配置使用Hibernate4Module 帮助解决: @Configurationpubli ...

  5. Qt编写自定义控件35-GIF录屏控件

    一.前言 在平时的写作过程中,经常需要将一些操作动作和效果图截图成gif格式,使得涵盖的信息更全面更生动,有时候可以将整个操作过程和运行效果录制成MP4,但是文件体积比较大,而且很多网站不便于上传,基 ...

  6. 解决 Windows启动时要求验证

    KB971033 微软检测盗版jar SLMGR -REARM 出现Window启动时要求验证版本, 在cmd窗口输入命令重新配置 重新启动即可 出现错误:解决办法 开始→设置,打开控制面板的“添加和 ...

  7. [C++/JavaScript]数据结构：栈和数列>案例引入(数制的转换)

    1 案例1:数制的转换 1.1 背景与原理 1.2 编程复现 (JavaScript版 复现) function convert(value, d){ stack = []; // 栈 result ...

  8. CockroachDB学习笔记——对此的选择

    无意间了解到TiDB,然后知道了他是一款国产团队开源的NewSQL数据库, 看了一下官网,有很多中文的文档和技术分享挺不错的. 但是安装起来好像挺麻烦的说. 测试的硬件环境 也吓死我了,我只有一台笔记 ...

  9. ORA-00054：Orcacle表锁定

    查询被锁的session_id select session_id from v$locked_object; 查询结果----------------------SESSION_ID8 查询被锁se ...

  10. Path环境变量的作用

    作用: 当我们要求系统运行一个程序(例如a.exe)而没有告诉它程序所在的完整路径时,系统会先在当前目录寻找是否存在a.exe,如果找到,直接运行:如果没有找到,会去path路径下面找.设置path, ...