canvas实例 扫地僧 北邮 web 前端课程之 Canvas 画布(5)

图案的绘制时从左上角开始的，根据不同的参数进行重复绘制。如果传递的图片是，则选取海报或第一帧作为其绘制图案源，如果使用 HTMLVideoElement 为对象，则当前播放位置帧被作为图案源。

设置 HTML 的核心代码如下：

<img src="b.jpg"></img>

<button>绘制图形</button>

<button>显示图形</button>

<div>

<canvas>亲，您的浏览器其不支持 canvas 标签。

</canvas>

</div>

设置 Java 例子如下：

var imgSrc = document.getElementById('psrc')

var pattern = context.createPattern(imgSrc,'repeat');

context.strokeStyle="#99cc33";

context.fillStyle= pattern;//by codeex.cn

context.lineWidth=10;

context.fillRect(10,10,200,220);

context.strokeRect(10,10,200,220);

12.3.4 线风格

操作线风格的方法有 4 个，格式如下：

context . lineCap [ = value ]

// 返回或设置线段的箭头样式，仅有三： 个选项：butt( 默认值),round,square; 其他值忽略

每根线的头和尾都是长方

butt

形，也就是不做任何的处理，为默认值

每根线的头和尾都增加一个

round

半圆形的箭头

square 每根线的头和尾都增加一个长方形，长度为线宽一半，高度为线宽

context.beginPath();

context.lineCap='butt';

context.moveTo(100,50);context.lineTo(250,50);

context.stroke();

context.beginPath();

context.lineCap='round';

context.moveTo(100,80); ;context.lineTo(250,80);

context.stroke();

context.beginPath();

context.lineCap='square';

context.moveTo(100,110);context.lineTo(250,110);

context.stroke();

context . lineJoin [ = value ]

// 返回或设置线段的连接方式，仅有三个选项：miter( 默认值),round ，

bevel

context . lineWidth [ = value ]

// 返回或设置线段的线宽，非大于 0 为 的值被忽略；默认值为 1.0 ；

context . miterLimit [ = value ]

// 返回或设置线段的连接处的斜于 率，非大于 0 的值被忽略；默认值为 10.0 。

线宽是指给定路径的中心到两边的粗细。换句话说就是在路径的两边各绘制线宽的一半。因为画布的坐标并不和像素直接对应，当需要获得精确的水平或垂直线的时候要特别注意。

想要获得精确的线条，必须对线条是如何描绘出来的有所理解。canvas实例见下图，用网格来代表 canvas 的坐标格，每一格对应屏幕上一个像素点。在第一个图中，填充了 (2,1) 至 (5,5) 的矩形，整个区域的边界刚好落在像素边缘上，这样就可以得到的矩形有着清晰的边缘。

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/jisuanjixue/article-64819-5.html