<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
border: 0;
}
body,html{
font-size: 1rem;
}
#myCanvas{
width: 100%;
height: 25%;
background-color: #ccc;
}
div span{
font-size: 1.8rem;
}
</style>
</head>
<body>
<canvas id="myCanvas"></canvas>
<script type="text/javascript">
var html = document.getElementsByTagName("html")[0];
var screenW = window.document.documentElement.clientWidth;
html.style.fontSize = (screenW/640)*20 + "px";
console.log(html.style.fontSize)
var c= document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(10,10);
ctx.lineTo(150,50);
ctx.lineTo(150,70);
ctx.lineTo(120,50);
ctx.lineTo(100,50);
ctx.lineTo(90,50);
ctx.lineTo(70,60);
ctx.lineTo(10,50);
ctx.stroke();
</script>
</body>
</html>

canvas画布的更多相关文章

  1. html 5 canvas画布整理

    1. 创建canvas画布<canvas id="myCanvas" width="800" height="800" >< ...

  2. 用html5的canvas画布绘制贝塞尔曲线

    查看效果:http://keleyi.com/keleyi/phtml/html5/7.htm 完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...

  3. 【读书笔记《Android游戏编程之从零开始》】12.游戏开发基础（Canvas 画布）

    1.Canvas 画布 画布类 Canvas 封装了图形和图片绘制等内容,此类常用的函数说明如下: drawColor(int color) 作用:绘制颜色覆盖画布,常用于刷屏 参数:颜色值,也可用十 ...

  4. 关于使用Css设置Canvas画布大小的问题

    问题分析 我们在调整画布大小时,希望画布中的图形保持不变,只是改变画布本身的大小.但是如果使用Css设置画布大小,则会出现问题. 问题描述 如果使用Css设置Canvas画布的大小,则导致画布按比例缩 ...

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

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

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

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

  7. “canvas画布仿window系统自带画图软件"项目的思考

    "canvas画布仿window系统自带画图软件"项目的思考 首先贴上DEMO图,并没有美化效果.对UI有要求的,请自带补脑技术. 思考一 在做项目的过程中,我发现"工具 ...

  8. 更新——Canvas画布动画效果之实现倒计时

    Hello,大家好! 小W复活啦!继续欢乐的给大家更博,输送新知识~~ 不开玩笑啦!秒进正题~~~ 上次更博,小W给大家介绍了Canvas画布的基础部分,以及实现了一个由7*10点阵图显示的倒计时的基 ...

  9. Canvas 画布组件（官网翻译）

    Canvas画布 The Canvas is the area that all UI elements should be inside. The Canvas is a Game Object w ...

  10. CANVAS画布与SVG的区别

    CANVAS是html5提供的新元素<canvas>,而svg存在的历史要比canvas久远,svg并不是html5专有的标签,最初svg是用xml技术(超文本扩展语言,可以自定义标签或属 ...

随机推荐

  1. 纪中集训 Day 2

    今天（其实是昨天= =）早上起来发现好冷好冷啊= = 吃完饭就准备比赛了，好吧B组难度的题总有一道不知到怎么写QAQ 太弱了啊！！！ 蒟蒻没人权啊QAQ 今天第4题不会写，在这里说说吧 题目的意思就是 ...

  2. 每天一个linux命令(37)--iostat命令

    Linux 系统中的iostat是I/O statistics (输入/输出统计)的缩写,iostat工具将对系统的磁盘操作活动进行监视.它的特点是汇报磁盘活动统计情况,同时也会汇报出CPU使用情况. ...

  3. Centos7 安装 zabbix3.2

    简介: Zabbix的一个很优秀的分布式监控服务器, 它有两部分组成: 1. “zabbix-server”用来收集并且在web端展示数据 2. “zabbix-agent”用来采集数据,发送给ser ...

  4. Laravel中间件

    先谈一谈中间件的使用场景,比如路由转到一张页面,我们需要记录用户的cookie,或者检测用户的访问权限,这些操作如果全写在控制器里是不合适的,因为随着业务的扩充,控制器里的业务逻辑会越来越臃肿,难以维 ...

  5. C#的数据类型、数据类型的转化

    一.c#有15个预定义类型,其中13个是值类型,两个是引用类型(string 和 object)这里主要说明整型.浮点型.布尔型以及引用型 1.整型数据 2.浮点型 浮点型从精度有低到高有float. ...

  6. Git如何检出指定目录或文件

    系统版本:Window 10,Git 版本:2.7.1 对于大型 Git 仓库,每次执行 Git 命令,都需要经过漫长的等待,特别是要经常执行的 git status 命令.下面是一个例子... 从 ...

  7. Debian安装Oracle Java步骤

    在Debian下安装OpenJDK使用apt命令非常方便的安装,但安装Oracle就需要手动了,这里需了解ln和update-alternatvies命令. ln链接 首先我们来说说linux的链接, ...

  8. Java面试15|网络

    1.TCP(Transmission Control Protocol)三次握手与四次分手 TCP在不可靠的传输信道上提供了可靠传输的抽象,隐藏了我们的应用程序大部分的复杂性功能:丢包重传,按序传送, ...

  9. （七）javascript中的数组

    一. 一维数组 1.1 声明数组 var 数组名=new Array(数组大小); 1.2  添加元素 <script> var a=new Array(3); a[0]="张三 ...

  10. vue入门 vue与react和Angular的关系和区别

    一.为什么学习vue.js vue.js兼具angular.js和react的优点,并且剔除了他们的缺点 官网:http://cn.vuejs.org/ 手册:http://cn.vuejs.org/ ...