<!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. 各种ORM框架对比（理论篇，欢迎来观摩）

    各种ORM框架对比 目前框架有以下 PetaPoco Dapper.NET Massive Simple.Data Chain PetaPoco 轻量级,以前单文件,目前有维护形成项目级别,适合多个数 ...

  2. 在Angular中，如果权限值是异步请求所得，如何将其设置为HTTP请求头的Authorization?

    遇到此问题的背景:项目需要实现单点登录,在前后端分离的前提下,前台如何保存token值成为了一个问题.想到的解决方案是,将token值统一存到一个前端程序,其他的前端程序去这个前端程序去取token( ...

  3. Python从入门到放弃之迭代器

    迭代器是Python2.1中新加入的接口(PEP 234),说明如下: The iterator provides a 'get next value' operation that produces ...

  4. MongoDB【第一篇】安装

    第一步:准备 1. 操作系统 CentOS-7-x86_64-Everything-1511 2. MongoDB 版本 mongodb-linux-x86_64-rhel70-3.4.2 3. 设置 ...

  5. xcode升级到8.1

    一.JPush集成: 1. xcode7在iOS10以上的真机上运行接收不到通知的问题,把xcode升级到8.1,在build phases -> link binary with librar ...

  6. Visual Studio 2013 百度云下载地址

    Visual Studio 2013 百度云下载地址 链接:http://pan.baidu.com/s/1sjFifox 密码: ipqe VS2013注册码:BWG7X-J98B3-W34RT-3 ...

  7. java数组、泛型、集合在多态中的使用及对比

    我们在使用数组,泛型集合的过程中不可避免的会碰到多态,或者说什么情况下能如何使用父数组引用子数组(集合.泛型)呢? 数组在多态中的使用 元素为父类型的数组引用可指向元素为子类型的数组对象 当数组被调用 ...

  8. rhel 6.7 离线安装docker

    本机系统信息 [test@rhel67temp ~]$ uname -a Linux rhel67temp 2.6.32-573.el6.x86_64 #1 SMP Wed Jul 1 18:23:3 ...

  9. 【经验】css

    1.父元素overflow:hidden,当父元素大小减小到不容纳子元素时,会出现滚动条.2.input的盒模型尺寸基准是content-box,它的宽度将是以width-border计算,也就是说一 ...

  10. Spring+SpringMVC+MyBatis+easyUI整合基础篇（七）JDBC url的连接参数

    在java程序与数据库连接的编程中,mysql jdbc url格式如下: jdbc:mysql://[host:port],[host:port].../[database][?参数名1][=参数值 ...