HTML5 Canvas ( 图片填充样式 ) fillStyle, createPattern
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>canvas</title>
<script type="text/javascript" src="../js/jQuery.js"></script>
<style type="text/css">
*{
margin: 0;
padding: 0;
outline: none;
border: none;
}
#canvas{
width: 7rem;
margin: .25rem 0 0 1.5rem;
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="canvas" width="1000" height="600"></canvas>
</body>
</html>
<script type="text/javascript">
/**
* rem 布局初始化
*/
$('html').css('font-size', $(window).width()/10);
/**
* 获取 canvas 画布
* 获取 canvas 绘图上下文环境
*/
var canvas = $('#canvas')[0];
var cxt = canvas.getContext('2d'); /**
* 创建图片填充样式
* 一: createPattern( 图片对象, 重复方式 )
* 二: createPattern( canvas对象, 重复方式)
* 三: createPattern( 视频对象, 重复方式)
*/ /*
var img = new Image();
img.src = "../img/favicon.ico";
img.onload = function(){
var pattern = cxt.createPattern(img, "repeat");
cxt.fillStyle = pattern;
cxt.fillRect(0, 0, 1000, 600);
}
*/ var fiveStartPath = function(cxt){
cxt.beginPath();
var x = 0; y = 0;
for(var i = 0; i < 5; i++){
x = Math.cos((18+72*i)/180*Math.PI);
y = Math.sin((18+72*i)/180*Math.PI);
cxt.lineTo(x, 0-y);
x = Math.cos((54+72*i)/180*Math.PI)/2.0;
y = Math.sin((54+72*i)/180*Math.PI)/2.0;
cxt.lineTo(x, 0-y);
}
cxt.closePath();
} var drawFiveStar = function(cxt, fiveStart){
cxt.save();
cxt.translate(fiveStart.offsetX, fiveStart.offsetY);
cxt.rotate(fiveStart.RotationAngle/180*Math.PI);
cxt.scale(fiveStart.Radius, fiveStart.Radius);
fiveStartPath(cxt);
cxt.fillStyle = "yellow";
cxt.fill();
cxt.restore();
} var createCanvas = function(){
var canvas = document.createElement("canvas");
canvas.width = 100;
canvas.height = 100;
var cxt = canvas.getContext('2d');
var fiveStart = {
Radius: 50,
offsetX: 50,
offsetY: 50,
RotationAngle: 0
}
drawFiveStar(cxt, fiveStart);
return canvas;
} var canvasBackground = createCanvas();
var patten = cxt.createPattern(canvasBackground, "repeat");
cxt.fillStyle = patten;
cxt.fillRect(0, 0, 1000, 600);
</script>
HTML5 Canvas ( 图片填充样式 ) fillStyle, createPattern的更多相关文章
- HTML5 Canvas 颜色填充学习
---恢复内容开始--- 如果我们想要给图形上色,有两个重要的属性可以做到:fillStyle 和 strokeStyle. fillStyle = color strokeStyle = color ...
- 导出HTML5 Canvas图片并上传服务器功能
这篇文章主要介绍了导出HTML5 Canvas图片并上传服务器功能,文中通过实例代码给大家介绍了HTML5 Canvas转化成图片后上传服务器,代码简单易懂非常不错,具有一定的参考借鉴价值,需要的朋友 ...
- HTML5 Canvas图片操作简单实例1
1.加载显示图片 <canvas id="canvasOne" class="myCanvas" width="500" height ...
- HTML5 Canvas渐进填充与透明
详细解释HTML5 Canvas中渐进填充的参数设置与使用,Canvas中透明度的设置与使 用,结合渐进填充与透明度支持,实现图像的Mask效果. 一:渐进填充(Gradient Fill) Canv ...
- HTML5 Canvas ( 图片绘制 转化为base64 ) drawImage,toDataURL
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- html5 canvas图片渐变
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- html5 canvas图片翻转
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- html5 canvas图片反色
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- html5 canvas图片马赛克
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
随机推荐
- Cocos2d-x 2.2.3 使用NDK配置编译环境
版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/wwj_748/article/details/30072379 Cocos2d-x 2.2.3 使用 ...
- 走进windows编程的世界-----消息处理函数（1）
Win32消息机制 过程驱动:程序是依照我们预先定义好的顺序运行.每运行一步,下一步都已经依照预定的顺序 继续运行,直至程序结束. 事件驱动:程序的运行顺序是无序的.某个时间点所运行的 ...
- 读写XML文档时，去掉新增加节点的“空命名空间”（xmlns=””）
在做对ReprotViewer编程时,想做一个用户可以更改显示/打印列的功能,大致看了下,只需要通过对rdlc文件中改变其<Hidden>节点值为false/true,即可实现对应某列的显 ...
- iText使用经历
最近用iText搞了下PDF,虽然一路趟坑而过,毕竟是搞出来了,所以iText还是不错的开源PDF生成软件的.先看搞出来的PDF长啥样: 然后看一路趟过来的坑: 1.表格怎么生成,具体是行怎么生成?列 ...
- net.sf.ezmorph.bean.MorphDynaBean cannot be cast to java.util.Map
public static void main(String[] arg0) { String reString = "{" + "\"code\": ...
- elastic-job 分布式定时任务框架 在 SpringBoot 中如何使用（二）动态添加任务需求
之前一篇用过了如何在使用创建最简单的任务:比如每天定时清空系统的缓存 这篇文章主要讲解:如何运用elastic-job-lite做灵活的细粒度任务,比如: 如何定时取消某个订单在下订单后30分钟未支付 ...
- thinkphp 3.2.3在nginx+php下的url重写配置经验
环境:centos7.2+lnmp1.3(nginx+php7.0+mysql5.5) 进入服务器配置路径:cd /usr/local/nginx/conf/nginx.conf 修改nginx.co ...
- Qt QTableWidget用法总结
转载:李宏兵 QTableWidget是QT程序中常用的显示数据表格的空间,很类似于VC.C#中的DataGrid.说到QTableWidget,就必须讲一下它跟QTabelView的区别了. QTa ...
- Mybatis学习（4）输入映射、输出映射、动态sql
一.输入映射: 通过parameterType指定输入参数的类型,类型可以是简单类型.hashmap.pojo的包装类型 1) 传递pojo的包装对象 需求是:完成用户信息的综合查询,传入的查询条件复 ...
- RBAC相关的配置
一.什么是RBAC 基于角色的访问控制(Role-Based Access Control)作为传统访问控制(自主访问,强制访问)的有前景的代替受到广泛的关注. 在RBAC中,权限与角色相关联,用户通 ...