canvas插入图片设置背景，渐变
##在canvas中插入图片(需要image对象)
1.canvas操作图片时，必须要等图片加载完才能操作
2.drawImage(image, x, y, width, height)
其中 image 是 image 或者 canvas 对象，x 和 y 是其在目标 canvas 里的起始坐标。
这个方法多了2个参数：width 和 height，这两个参数用来控制 当像canvas画入时应该缩放的大小
window.onload=function(){
var canvas=document.querySelector("#test");
if(canvas.getContext){
var ctx=canvas.getContext("2d");
var img= new Image();
img.src="img/tg.png";
img.onload=function(){
draw();
}
function draw(){
ctx.drawImage(img,,,img.width,img.height)；
}
}
}
window.onload=function(){
var canvas=document.querySelector("#test");
if(canvas.getContext){
var ctx=canvas.getContext("2d");
var img= new Image();
img.src="img/tg.png";
img.onload=function(){
draw();
}
function draw(){
ctx.drawImage(img,,,img.width,img.height);
}
}
}
drawImage
###在canvas中设置背景(需要image对象)
1.createPattern(image, repetition)
image:图像源
epetition:
"repeat"
"repeat-x"
"repeat-y"
"no-repeat"
一般情况下，我们都会将createPattern返回的对象作为fillstyle的值
function draw(){
var pattern=ctx.createPattern(img,"no-repeat")//不加；号
ctx.fillStyle=pattern;
ctx.fillRect(,,,);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css"> html,body{
height: %;
overflow: hidden; }
body{
background: greenyellow;
}
#test{
position: absolute;
top: ;
left: ;
right: ;
bottom:;
margin: auto;
background: gray; }
</style>
</head>
<body>
<canvas id="test" width="" height="">
<span>您的浏览器不支持画布元素 请您换成萌萌的谷歌</span>
</canvas>
</body>
<script type="text/javascript"> window.onload=function(){
var canvas=document.querySelector("#test");
if(canvas.getContext){
var ctx=canvas.getContext("2d");
var img= new Image();
img.src="img/tg.png";
img.onload=function(){
draw();
}
function draw(){
var pattern=ctx.createPattern(img,"no-repeat")//不加；号
ctx.fillStyle=pattern;
ctx.fillRect(,,,);
} }
}
</script>
</html>
###渐变
canvas渐变（线性渐变）
createLinearGradient(x1, y1, x2, y2)
表示渐变的起点 (x1,y1) 与终点 (x2,y2)
gradient.addColorStop(position, color)
gradient :createLinearGradient的返回值
addColorStop 方法接受 2 个参数，
position 参数必须是一个 0.0 与 1.0 之间的数值，表示渐变中颜色所在的相对位置。
例如，0.5 表示颜色会出现在正中间。
color 参数必须是一个有效的 CSS 颜色值（如 #FFF， rgba(0,0,0,1)，等等）
// function draw(){
var gradient = ctx.createLinearGradient(0, 0, 200, 200);
gradient.addColorStop(0,"red");
gradient.addColorStop(0.5,"yellow");
gradient.addColorStop(0.7,"pink");
gradient.addColorStop(1,"green");
ctx.fillStyle=gradient;
ctx.fillRect(0,0,300,300);
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: ;
padding: ;
}
html,body{
height: %;
overflow: hidden;
}
body{
background: pink;
}
#test{
background: gray;
position: absolute;
left: ;
top: ;
right: ;
bottom: ;
margin: auto;
}
</style>
</head>
<body>
<canvas id="test" width="" height="">
<span>您的浏览器不支持画布元素 请您换成萌萌的谷歌</span>
</canvas>
</body>
<script type="text/javascript">
window.onload=function(){
var canvas = document.querySelector("#test");
if(canvas.getContext){
var ctx = canvas.getContext("2d"); /*var img = new Image();
img.src="tg.png";
img.onload=function(){
draw();
}*/ // function draw(){
var gradient = ctx.createLinearGradient(, , , );
gradient.addColorStop(,"red");
gradient.addColorStop(0.5,"yellow");
gradient.addColorStop(0.7,"pink");
gradient.addColorStop(,"green");
ctx.fillStyle=gradient;
ctx.fillRect(,,,);
// } }
}
canvas渐变（径向渐变）
createRadialGradient(x1, y1, r1, x2, y2, r2)
前三个参数则定义另一个以(x1,y1) 为原点，半径为 r1 的圆，
后三个参数则定义另一个以 (x2,y2) 为原点，半径为 r2 的圆。
var gradient = ctx.createRadialGradient(, , , , , )
gradient.addColorStop(,"red");
gradient.addColorStop(0.5,"yellow");
gradient.addColorStop(0.7,"pink");
gradient.addColorStop(,"green");
ctx.fillStyle=gradient;
ctx.fillRect(,,,);
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: ;
padding: ;
}
html,body{
height: %;
overflow: hidden;
}
body{
background: pink;
}
#test{
background: gray;
position: absolute;
left: ;
top: ;
right: ;
bottom: ;
margin: auto;
}
</style>
</head>
<body>
<canvas id="test" width="" height="">
<span>您的浏览器不支持画布元素 请您换成萌萌的谷歌</span>
</canvas>
</body>
<script type="text/javascript">
window.onload=function(){
var canvas = document.querySelector("#test");
if(canvas.getContext){
var ctx = canvas.getContext("2d"); /*var img = new Image();
img.src="tg.png";
img.onload=function(){
draw();
}*/ // function draw(){
var gradient = ctx.createRadialGradient(, , , , , )
gradient.addColorStop(,"red");
gradient.addColorStop(0.5,"yellow");
gradient.addColorStop(0.7,"pink");
gradient.addColorStop(,"green");
ctx.fillStyle=gradient;
ctx.fillRect(,,,);
// } }
} </script>
</html>
canvas插入图片设置背景，渐变的更多相关文章
- IOS 利用图片设置背景
UIImageView* imageView = [[UIImageView alloc] initWithFrame:self.view.bounds]; imageView.image = [UI ...
- 关于HTML表格中插入背景图片的问题_百度知道 3个回答 - 提问时间: 2009年03月23日 最佳答案: <tr style="background-image:url(1.jpg)"> (这事设置背景图片) <img src="images/bbs_student1.gif" />如果是这样的就是直接插入图片。你看看,...
关于HTML表格中插入背景图片的问题_百度知道 3个回答 - 提问时间: 2009年03月23日 最佳答案: <tr style="background-image:url(1.jpg ...
- 【CSS】css网页背景图片设置
刚学CSS,了解了下网页背景图设置,顺便记录下. 下面主要是实现背景图位置保持不变,即不随滚动条动而动的功能. body { background-image:url(images/bck.png); ...
- background-size （设置背景图片的大小）
设置背景图片的大小,以长度值或百分比显示(数值包括 长度length和百分比percentage),还可以通过cover和contain来对图片进行伸缩. 语法:background-size: au ...
- CSS3设置背景图片的大小
设置背景图片的大小,以长度值或百分比显示,还可以通过cover和contain来对图片进行伸缩. background-size 语法详解: 要在插入图片之后进行设置背景图片的大小 backgroun ...
- img只显示图片一部分 或 css设置背景图片只显示图片指定区域
17:14 2016/3/22img只显示图片一部分 或 css设置背景图片只显示图片指定区域 background-position: 100% 56%; 设置背景图片显示图片的哪个坐标区域,图片左 ...
- css 设置背景图片模糊，内容不模糊
需求:一个div设置了background: url,现在需要使图片背景模糊,div内的文字清晰显示. 原始代码: <!DOCTYPE html> <html lang=" ...
- Pyqt 设置 背景颜色和背景图片、 QPalette 调色板 与QPainter 画板区别 、 不规则图片
设置 背景颜色和背景图片 首先设置autoFillBackground属性为真然后定义一个QPalette对象设置QPalette对象的背景属性(颜色或图片)最后设置QWidget对象的Palette ...
- 【POI】使用POI处理xlsx的cell中的超链接 和 插入图片 和 设置打印区域
使用POI对xlsx中插入超链接和 插入图片 package com.it.poiTest; import java.awt.image.BufferedImage; import java.io.B ...
随机推荐
- 配置Keepalived单实例实现单IP自动漂移接管
实验要求 ==> 实现Keepalived高可用对之间的故障切换过程,配置的vrrp实例的VIP为192.168.10.66,可以将其配置在网卡别名上. 实验环境 ==> CentOS 7 ...
- vue 过滤器filter的详解
1.代码运用的地方 <!-- 在双花括号中 --> {{ date | formatDate}} <!-- 在 `v-bind` 中 --> <div v-bind:id ...
- pytest_fixture--scope="session"
import pytest@pytest.fixture(scope="session")def login(): print("\n输入用户名密码登陆! configt ...
- Vue双向数据绑定原理深度解析
首先,什么是双向数据绑定?Vue是三大MVVM框架之一,数据绑定简单来说,就是当数据发生变化时,相应的视图会进行更新,当视图更新时,数据也会跟着变化. 在分析其原理和代码的时候,大家首先了解如下几个j ...
- 《提高c++性能的编程技术》读书笔记
一个程序的执行效率是取决于改程序翻译成汇编语言之后的执行的机器指令的条数.而每一个机器指令的执行的周期是一定的.C语言和C++都是高于汇编语言的高级语言,其中,C语言源代码与其相应的机器指不是完全同一 ...
- 使用net模块创建tcp服务器
demo /** * Created by ZXW on 2018/4/6. */ var net=require('net'); ; const HOST='localhost'; var clie ...
- 23.包、修饰符、jar
下面都是在记事本里面写代码 1. 包的定义格式: package 包名(全小写) 例如: package a; 注意: 1)package语句必须位于java文件的第一个语句 2.编译运行 注意: ...
- SpringMVC 拦截器原理
前言 SpringMVC 拦截器也是Aop(面向切面)思想构建,但不是 Spring Aop 动态代理实现的, 主要采用责任链和适配器的设计模式来实现,直接嵌入到 SpringMVC 入口代码里面. ...
- JAVA C 数据类型对应
{ Java—C和操作系统数据类型的对应表 Java Type C Type Native Representation boolean int 32-bit integer (customizabl ...
- 暴力三维树状数组求曼哈顿距离求最值——牛客多校第八场D
涉及的知识点挺多,但是大多是套路 1.求曼哈顿距离的最值一般对所有情况进行讨论 2.三维树状数组用来求前缀最大值 /* 有一个三维坐标系(x,y,z),取值范围为[1,n],[1,m],[1,h],有 ...