与canvas的初次邂逅
canvas基本用法
1.什么是canvas(画布)
<canvas>是 HTML5 新增的元素，可用于通过使用JavaScript中的脚本来绘制图形
例如，它可以用于绘制图形，创建动画。 最早由Apple引入WebKit
我们可以使用标签来定义一个canvas元素
----->使用标签时，建议要成对出现，不要使用闭合的形式。
----->canvas元素默认具有高宽
width： 300px
height：150px
2.替换内容
<canvas>很容易定义一些替代内容。由于某些较老的浏览器（尤其是IE9之前的IE浏览器）
不支持HTML元素"canvas"，
但在这些浏览器上你应该要给用户展示些替代内容。
这非常简单：我们只需要在<canvas>标签中提供替换内容就可以。
—>支持<canvas>的浏览器将会忽略在容器中包含的内容，并且只是正常渲染canvas。
—>不支持<canvas>的浏览器会显示代替内容
3.canvas标签的两个属性
<canvas>看起来和<img>元素很相像，唯一的不同就是它并没有 src 和 alt 属性。
实际上，<canvas>标签只有两个属性—— width和height。这些都是可选的。
当没有设置宽度和高度的时候，canvas会初始化宽度为300像素和高度为150像素。
画布的高宽
- html属性设置width height时只影响画布本身不影画布内容
- css属性设置width height时不但会影响画布本身的高宽，
- 还会使画布中的内容等比例缩放（缩放参照于画布默认的尺寸）
4.渲染上下文
<canvas> 元素只是创造了一个固定大小的画布，要想在它上面去绘制内容，我们需要找到它的渲染上下文
<canvas> 元素有一个叫做 getContext() 的方法，这个方法是用来获得渲染上下文和它的绘画功能。
getContext()只有一个参数，上下文的格式
----->获取方式
var canvas = document.getElementById('box');
var ctx = canvas.getContext('2d');
----->检查支持性
var canvas = document.getElementById('tutorial');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
}
5. canvas绘制矩形
HTML中的元素canvas只支持一种原生的图形绘制：矩形。所有其他的图形的绘制都至少需要生成一条路径
5.1.绘制矩形
canvas提供了三种方法绘制矩形：
---->绘制一个填充的矩形（填充色默认为黑色）
fillRect(x, y, width, height)
---->绘制一个矩形的边框（默认边框为:一像素实心黑色）
strokeRect(x, y, width, height)
---->清除指定矩形区域，让清除部分完全透明。
clearRect(x, y, width, height)
x与y指定了在canvas画布上所绘制的矩形的左上角（相对于原点）的坐标。
width和height设置矩形的尺寸。（存在边框的话，边框会在width上占据一个边框的宽度，height同理）
<body>
<canvas id="test" width="300" height="300">
<span>您的浏览器不支持画布元素 请您换成萌萌的谷歌</span>
</canvas>
</body>
<script type="text/javascript">
// 同步思维 有别于浏览器本身的渲染机制
window.onload=function(){
//querySelector身上有坑
//拿到画布
var canvas = document.querySelector("#test");
if(canvas.getContext){
var ctx = canvas.getContext("2d");
ctx.fillStyle="deeppink";
ctx.strokeStyle="pink";
ctx.lineWidth=25;
ctx.lineJoin="round";
//注意不加单位
//填充的矩形
//带边框的矩形
// 100 : 99.5 --- 100.5(99-101)
// 100.5: 100 --- 101
ctx.strokeRect(100,100,100,100)
ctx.fillRect(0,0,100,100)
// ctx.clearRect(100,100,100,100)
}
}
</script>
5,2. strokeRect时，边框像素渲染问题
按理渲染出的边框应该是1px的，
canvas在渲染矩形边框时，边框宽度是平均分在偏移位置的两侧。
context.strokeRect(10,10,50,50)
:边框会渲染在10.5 和 9.5之间,浏览器是不会让一个像素只用自己的一半的
相当于边框会渲染在9到11之间
context.strokeRect(10.5,10.5,50,50)
:边框会渲染在10到11之间
5.3. 添加样式和颜色
fillStyle :设置图形的填充颜色。
strokeStyle :设置图形轮廓的颜色。
默认情况下，线条和填充颜色都是黑色（CSS 颜色值 #000000）
lineWidth : 这个属性设置当前绘线的粗细。属性值必须为正数。
描述线段宽度的数字。 0、 负数、 Infinity 和 NaN 会被忽略。
默认值是1.0。
5.4. lineWidth & 覆盖渲染
5.5. lineJoin
设定线条与线条间接合处的样式（默认是 miter）
round : 圆角
bevel : 斜角
miter : 直角
后记
后面的文章继续分享哦
1070
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
