码迷,mamicode.com
首页 > 其他好文 > 详细

(二)canvas边框问题

时间:2018-08-02 15:03:29      阅读:148      评论:0      收藏:0      [点我收藏+]

标签:highlight   .com   nim   context   can   mini   element   默认   技术   

技术分享图片
  • 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边框问题

标签:highlight   .com   nim   context   can   mini   element   默认   技术   

原文地址:https://www.cnblogs.com/bgwhite/p/9406787.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!