canvas实例扫地僧 北邮 web(5)

如果 image 参数是一个 HTMLCanvasElement 对象，但其 width 属性或 height 属性是0，则执行时抛出抛出 INVLAID_STATE_ERR 异常。

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

设置 HTML 的核心代码如下：

绘制图形

显示图形

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

设置 Javascript 例子如下：

var imgSrc = document.getElementByIdx_x('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);

北邮web前端课程之Canvas画布" />

12.3.4 线风格

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

context .lineCap [ =value ]

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

每根线的头和尾都是长方北邮web前端课程之Canvas画布" />

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

北邮web前端课程之Canvas画布" />

context .lineWidth [ =value ]

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

context .miterLimit [ =value ]

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

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

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

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