<!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. centos 安装gcc->联网 问题解决

    本篇部分摘抄至TD_时缔 VMware虚拟机下安装centosmini版本,安装后第一件事就是yum update 但是有错:cannot find a valid baseurl for repo ...

  2. NSIndexSet 浅析

    Cocoa 中提供了两个用于维护区间集合的类型:NSIndexSet和NSMutableIndexSet . 这两个类型容易其名字一样,其区别就在于是否可以修改.这个区别和NSArray的一样,NSI ...

  3. sicily 1063. Who's the Boss 排序+递推

    #include <cstdio> #include <algorithm> using namespace std; struct Emp{ int id, salary, ...

  4. oracle 用系统用户以SYSDBA身份登陆

    最近发现很多人问我 这么直接用系统OS用户 登陆 oracle : 1.首先通过用管理身份打开DOS命令窗口: 然后使用命令: sqlplus / as sysdba 即可: 其实这个命令和用sys用 ...

  5. hibernate中save（）、update（）、saveOrUpdate（）的区别

    save()方法很显然是执行保存操作的,如果是对一个新的刚new出来的对象进行保存,自然要使用这个方法了,数据库中没有这个对象. update()如果是对一个已经存在的托管对象进行更新那么肯定是要使用 ...

  6. ERP实施员的保密要求

    一.公司机密文件范围 1    公司级计算机密码 2    公司级程序软件 3    与客户联系的各种远程联系用户名,密码 4    公司发展计划.规划 5    公司客户资料.财务报表.人事薪资.报 ...

  7. Visual Studio 2017正式版离线安装及介绍

    Visual Studio 2017 RTM正式版离线安装及介绍. 首先至官网下载:https://www.visualstudio.com/zh-hans/downloads/ VS 2017 正式 ...

  8. OpenStack/devstack with Neutron on Ubuntu 14 (1)

    安装前,推荐安装一个全新的Ubuntu Server14.04,如果使用之前的ubuntu, 中间可能遇到各种的python包依赖,以及软件版本不对应的问题 环境准备,新建stack用户,给予sudo ...

  9. 用Visual Studio Code Debug世界上最好的语言

    前言 这阵子因缘巧合接手了一个辣鸡项目,是用世界上最好的拍黄片写的,项目基本是另一个小伙伴在撸码,我就兼职打杂和发布做点运维的工作. 然后昨天项目上了测试版之后,一用起来Error满天飞了.让小伙伴查 ...

  10. 关于ORACLE通过file_id与block_id定位数据库对象遇到的问题的一点思考

    在ORACLE中,我们可以通过file_id(file#)与block_id(block#)去定位一个数据库对象(object).例如,我们在10046生成的trace文件中file#=4 block ...