Canvas簡(jiǎn)介及實(shí)踐:
canvas是HTML5新增的元素,主要作用是支持用JS畫圖缕坎。
一琅催、創(chuàng)建Canvas元素
規(guī)定元素的 id与倡、寬度和高度
二郊丛、通過(guò)JavaScript來(lái)繪制
canvas 元素本身是沒(méi)有繪圖能力的李请。所有的繪制工作必須在 JavaScript 內(nèi)部完成。
?1:JavaScript使用id來(lái)尋找canvas元素厉熟。
?2:創(chuàng)建context對(duì)象导盅。getContext(“2d”)對(duì)象是內(nèi)建的HTML5對(duì)象。
3:繪制一個(gè)紅色的矩形庆猫。fillStyle方法將其染成紅色,fillRect方法規(guī)定了形狀绅络、位置和尺寸
三月培、實(shí)例-圖像?把一幅圖像放置到畫布上:
四、水印生成主流程
1恩急、建立一個(gè)畫布:
2杉畜、生成水印字符串:
3、CanvasElement.toDataURL()?方法返回一個(gè)包含圖片展示的data URLs衷恭,包含了Base64過(guò)的圖像信息此叠。說(shuō)明:Data URLs, URLs prefixed with the?data:?scheme, allow content creators to embed small files inline in documents. 例如:“data:image/png;base64,R0lGODdhMAAwAPAAAAAAAP”
4、平鋪在background上