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. geth 新建账户

    使用geth的account命令管理账户,例如创建新账户.更新账户密码.查询账户等: geth account <command> [options...] [arguments...] ...

  2. 【C++】插值函数代码分析学习

    插值函数代码分析学习,用的CImage类load图像. // Imagejoint.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #inc ...

  3. centos 开启关闭网卡

    ifdown ifcfg-enp7s0 关闭网卡 ifup ifcfg-enp7s0 开启网卡

  4. [C++]单源最短路径：迪杰斯特拉(Dijkstra)算法(贪心算法)

    1 Dijkstra算法 1.1 算法基本信息 解决问题/提出背景 单源最短路径(在带权有向图中,求从某顶点到其余各顶点的最短路径) 算法思想 贪心算法 按路径长度递增的次序,依次产生最短路径的算法 ...

  5. gitlab安装、下载、推送 代码（推荐）

    环境: 内存必须5G以上 centos7.5 服务端:192.168.0.74 客户端:192.168.0.73 GitLab的安装 1.在CentOS系统上,下面的命令将会打开系统防火墙HTTP和S ...

  6. Spark On YARN启动流程源码分析（一）

    本文主要参考: a. https://www.cnblogs.com/yy3b2007com/p/10934090.html 0. 说明 a. 关于spark源码会不定期的更新与补充 b. 对于spa ...

  7. vue项目中使用v-for的方法莫名提示错误

    错误示例: 解决方法一: 在v-for后面绑定key,示例如下→ 解决方法二: 点击左下角“设置”>“用户设置”内添加一下代码片段: { "vetur.validation.templ ...

  8. 分布式开发之:id生成器

    一般分布式系统开发中不建议使用数据库自带的自增ID做id. 理由: 1.不方便分库分表.(TIDB时代待商榷) 2.不利于多机房多活部署. 那么如果不使用数据库的id.那怎么生成id呢. 1. Twi ...

  9. Re0:在 .NetCore中 EF的基本使用

    整理一下目前在用的EFCore 记得好像是因为懒得写sql,于是开始试着用EF 先根据数据库生成一个好东西,嗯 Scaffold-DbContext "Data Source=localho ...

  10. [BAT] SetX 永久设置环境变量

    SetX 有三种使用方式: 语法 1: SETX [/S system [/U [domain\]user [/P [password]]]] var value [/M] 语法 2: SETX [/ ...