canvas是HTML5新增的元素,主要作用是支持用JS画图。
一、创建Canvas元素
二、通过JavaScript来绘制
canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成。
•1:JavaScript使用id来寻找canvas元素。
•2:创建context对象。getContext(“2d”)对象是内建的HTML5对象。
3:绘制一个红色的矩形。fillStyle方法将其染成红色,fillRect方法规定了形状、位置和尺寸
三、实例-图像 把一幅图像放置到画布上:
四、水印生成主流程
1、建立一个画布:
2、生成水印字符串:
3、CanvasElement.toDataURL() 方法返回一个包含图片展示的data URLs,包含了Base64过的图像信息。说明:Data URLs, URLs prefixed with the data: scheme, allow content creators to embed small files inline in documents. 例如:“data:image/pngbase64,R0lGODdhMAAwAPAAAAAAAP”
4、平铺在background上
网站图片自动加水印的步骤:1.需要下载一个网站水印插件DX-Watermark(下载地址:http://wordpress.org/extend/plugins/dx-watermark)
2.进入自己的网站后台,在后台找到插件安装来安装这个水印插件,插件安装好之后即可出现水印设置选项;
3.在插件的设置选项中可以设置水印的类型为文字和图片,还是水印在图片上的位置;
4.如果选择图片,可以在下方去上传自己的水印的图片,建议使用一次半透明的水印图片;
5.设置好之后,保存。这时发文章时再插入图片时,网站就会自动给上传的图片添加水印了;
6.注意事项:本水印插件只适用于wordpress程序网站,如果其它程序网站请选择相应的水印插件。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)