H5 canvas绘图描边小细节
来源:互联网 发布:阿里云好还是腾讯云好 编辑:程序博客网 时间:2024/06/05 21:50
最近在使用canvas时突然发现一个小细节,代码如下:
<canvas id="canvas" width="200" height="200" style="border: 1px solid #ccc;"></canvas> <script> var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); context.lineWidth = 30; context.strokeStyle = '#FF0000'; context.strokeRect(50,50,80,100); </script>
但是,canvas画出的矩形起点并不是(50,50),而是(35,35)。这是怎么回事呢?
我们看下面的图,应该就明白了。
canvas的描边类似于PS描边中的“居中”,以绘图原点为中心向四周绘制边框。
0 0
- H5 canvas绘图描边小细节
- h5 canvas 绘图
- H5绘图技术之canvas
- H5 CANVAS绘图轨迹回放
- H5基础(5)-HTML5绘图canvas
- H5网页Canvas画布绘图 图片文字合成
- Html5 Canvas 系列_绘图三(H5 ,CSS3 动态八卦图)
- Html5 Canvas 系列_绘图三(H5 绘制圆弧)
- Html5 Canvas 系列_绘图三(H5 拖放组件)
- H5 - canvas
- h5 canvas
- H5 canvas
- Canvas绘图
- Canvas绘图
- canvas绘图
- 【canvas】Android Canvas绘图详解
- H5中的canvas元素
- H5 canvas 笔记 一
- 序列化与反序列化 Socket中处理方法
- 单例模式详解
- swoole1.8.0+版本异步redis安装(本实例为swoole1.8.10版本)详解
- 设置Android studio 禁用sdk检查更新
- VS2015使用小技巧 查看值类型int与引用类型string在栈中的地址、堆中的地址
- H5 canvas绘图描边小细节
- 单例模式三种模式,饿汉、饱汉、双重锁模式,实例及优劣详解
- cannot import name imread
- 移动端meta常用参数
- Cygwin (64-bit)绿色版
- 关于Android adb 调试程序解决小米MIUI的INSTALL_FAILED_UPDATE_INCOMPATIBLE的安装错误
- jvm笔记3--性能监控与故障处理工具
- 关于RSA密钥生成方法
- 泛型练习1