• lineWidth
    • 设置边框的大小
  • fillStyle
    • 设置div的颜色
  • strokeStyle
    • 设置边框的颜色
注：
  • 边框在不设置的情况下默认为1px 黑色，但是x，y轴的距离是以图形的正中心为原始点，所以说在移动的过程中会向左移0.5右移0.5但是不存在0.5所以会补全，在补全的过程中颜色也就发生了变化因此，看上去就不再是1px和黑色了，如何解决：
    • 我们可以通过距离x轴和y的距离为.5，也可以通过设置宽度来改变
  • 边框的距离设置和内容的距离设置顺序互相调换得到的结果也是不同的
<!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">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>（二）canvas边框问题</title>

</head>

<style>

* {margin: 0;padding: 0;}

body { background-color: black; }

#c1 { background-color: #fff; }

</style>

<body>

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

<script>

oC = document.getElementById("c1");

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

ctx.lineWidth = 1;//设置边框大写

ctx.fillStyle = "yellow";//填充实体颜色

ctx.strokeStyle = "red";//填充边框颜色

ctx.strokeRect(50.5,50.5,100,100);//对边框的设置

ctx.fillRect(50.5,50.5,100,100);//对内容的设置

</script>

</body>

</html>

　　

（二）canvas边框问题的更多相关文章

  1. canvas 图片拖拽旋转之二——canvas状态保存(save和restore)

    引言 在上一篇日志“canvas 图片拖拽旋转之一”中,对坐标转换有了比较深入的了解,但是仅仅利用坐标转换实现的拖拽旋转,会改变canvas坐标系的状态,从而影响画布上其他元素的绘制.因此,这个时候需 ...

  2. HTML5 快速学习二 Canvas

    本篇文章开始讲解HTML5的核心功能之一:Canvas 通过Canvas可以动态生成和展示图形.图表.图像以及动画. Canvas API功能非常多,我们将讨论最常用的功能. 我们先新建一个canva ...

  3. java-js知识库之二——canvas绘制炫彩气泡

    现在使用canvas绘制气泡,虽说很多人都已经实现过了,可能方法都大同小异,但自己写和看别人写完全是两码事,自己会写的才是自己的,话不多说,直接上代码. 先来一张效果图: 现在上代码,代码有详细的注释 ...

  4. 学习windows编程 day3 之窗口绘画二：边框绘制函数

    #include <windows.h> LRESULT CALLBACK WndProc(HWND hwnd, UINT message, WPARAM wParam, LPARAM l ...

  5. 【javascript】谈谈HTML5: Web-Worker、canvas、indexedDB、拖拽事件

    前言:作为一名Web开发者,可能你并没有对这个“H5”这个字眼投入太多的关注,但实际上它早已不知不觉进入到你的开发中,并且总有一天会让你不得不正视它,了解它并运用它   打个比方:<海贼王> ...

  6. 采用css实现流动的边框

    问题起缘一个曾经做过的项目, 类似excel那样, 选中单元格并复制或粘贴时有个边框流动的效果, like this: 在前端要作出这种效果可能方法并不少, 不过我只想到了2种, 真边框与假边框, 真 ...

  7. WPF入门教程系列六——布局介绍与Canvas（一）

    从这篇文章开始是对WPF中的界面如何布局做一个较简单的介绍,大家都知道:UI是做好一个软件很重要的因素,如果没有一个漂亮的UI,功能做的再好也无法吸引很多用户使用,而且没有漂亮的界面,那么普通用户会感 ...

  8. 第 17 章 CSS 边框与背景[上]

    学习要点: 1.声明边框 2.边框样式 3.圆角边框 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 边框和背景,通过边框和背景的样式设置,给元素增加更丰富的外观. 一．声明边框 边框的声明有 ...

  9. Android自定义View (二) 进阶

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/24300125 继续自定义View之旅,前面已经介绍过一个自定义View的基础的例 ...

随机推荐

  1. springmvc ModelAndView

    /** * 目标方法的返回值可以是 ModelAndView 类型. * 其中可以包含视图和模型信息 * SpringMVC 会把 ModelAndView 的 model 中数据放入到 reques ...

  2. HDU - 6315 Naive Operations (线段树+思维) 2018 Multi-University Training Contest 2

    题意:数量为N的序列a和b,a初始全为0,b为给定的1-N的排列.有两种操作:1.将a序列区间[L,R]中的数全部+1:2.查询区间[L,R]中的 ∑⌊ai/bi⌋(向下取整) 分析:对于一个位置i, ...

  3. 优秀 H5 案例收集 vol.3（不定期更新）

    上期浏览:Vol.1   Vol.2 爱的不同定义,五笔连成爱http://news.163.com/special/fdh5_valentines/ 世界华语悬疑文学大赛—下一位悬疑大师,就是你!h ...

  4. 浅析 MySQL Replication（本文转自网络）

    作者:卢飞 来源:DoDBA(mysqlcode) 0.导读 本文几乎涵盖了MySQL Replication(主从复制)的大部分知识点,包括Replication原理.binlog format.复 ...

  5. 20165101刘天野 2018-2019-2《网络对抗技术》第1周 Kali的安装

    20165101刘天野 2018-2019-2<网络对抗技术>第1周 Kali的安装 一.实验要求 Kali下载 安装 网络 共享 软件源 二.实验步骤 1.下载 从Kali官网中下载相应 ...

  6. 在Linux上使用Wine安装轻聊版的QQ的步骤讲解

    准备 Wine 环境 wine 版本要求,越新越好,我用的 1.7.55,目前最新是1.8rc2. 删除或者备份你的 ~/.wine,如果你之前运行过 wine 的话.因为涉及到少量配置,尽量不要让以 ...

  7. Java学习笔记50：JSONObject与JSONArray的使用（转）

    Java不像PHP解析和生产JSON总是一个比较痛苦的过程.但是使用JSONObject和JSONArray会让整个过程相对舒服一些. 需要依赖的包:commons-lang.jar commons- ...

  8. PHP7的五大新特性

    如果你使用的是基于 composer 和 PSR-4 的框架,这种写法是否能成功的加载类文件?其实是可以的,composer 注册的自动加载方法是在类被调用的时候根据类的命名空间去查找位置,这种写法对 ...

  9. application pool can not write to event log

    https://stackoverflow.com/questions/9564420/the-source-was-not-found-but-some-or-all-event-logs-coul ...

  10. Floyd算法 - 最短路径

    2017-07-27 22:21:04 writer:pprp 该算法的本质是动态规划,形式简单,复杂度高为O(n^3): d[i][j] = max(d[i][k]+d[k][j],d[i][j]) ...