canvas（画布）

最新推荐文章于 2021-02-28 16:04:05 发布

敢敢--

最新推荐文章于 2021-02-28 16:04:05 发布

阅读量408

点赞数

分类专栏： HTML5

本文链接：https://blog.csdn.net/yu9696/article/details/51920450

版权

HTML5 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<img src="../img/tu1.jpg" id="tu" />


<canvas id="mycanvas" width="400" height="500" style="background-color: greenyellow;
border: 3px solid #000000;">

浏览器不支持canvas！！！
</canvas>
<div id="mydiv1">
<input type="button" value="绘制文字" οnclick="wenzi()"/>
<input type="button" value="绘制空心文字" οnclick="kongxinwenzi()"/>

<input type="button" value="绘制矩形" οnclick="juxing()"/>
<input type="button" value="绘制实心矩形" οnclick="shixinjuxing()"/>

<input type="button" value="绘制图片" οnclick="tupian()"/>
<input type="button" value="绘制图片2" οnclick="tupian2()"/>
<input type="button" value="绘制图片3" οnclick="tupian3()"/>

<input type="button" value="绘制路径" οnclick="lujing()"/>
<input type="button" value="绘制路径2" οnclick="lujing2()"/>

<input type="button" value="绘制曲线" οnclick="quxian()"/>

</div>
<input type="button" value="清除" οnclick="qingchu()"/>

<div>

</div>

<script>
var mycanvas = document.getElementById("mycanvas");
var gr = mycanvas.getContext("2d");

gr.font = "30px Verdana";
gr.fillStyle = "blue";
gr.fillText("W3School",20,50);
// alert(gr);//CanvasRenderingContext2D(画笔对象)

//清除
function qingchu(){
gr.clearRect(0,0,400,500);
}

function wenzi(){
// fillTexe函数的作用是绘制文字内容（注意绘制出来的结果是图形，无法直接选中其中的文字内容）
// 参数有四个，至少写出其中三个
// 1--需要绘制的内容文字 2--水平x轴的坐标点 3--垂直y轴的坐标点 4--绘制的文字的总的宽度，避免溢出
// 注意：坐标点表示绘制的第一个文字的左下角
// 不做样式设置的话，默认文字为黑色

gr.font="30px Georgia";
// 创建渐变
var gradient=gr.createLinearGradient(0,0,mycanvas.width,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");

// 用渐变填色
gr.fillStyle=gradient;
gr.fillText("W3School",10,90);

}

// 空心矩形
function juxing(){
gr.strokeRect(20,60,50,30);
}
// 实心矩形

function shixinjuxing(){
gr.fillStyle="orange";
gr.fillRect(50,60,50,30);
}
// 空心文字
function kongxinwenzi(){
gr.font="30px '微软雅黑'";
gr.strokeText("空心文字",10,90);
}

//绘制图片
function tupian(){
var tu = document.getElementById("tu");
// gr.drawImage(img,x,y);
// 三个参数，分别表示：
// 1.img 规定要使用的图像、画布或视频。
// 2.x 在画布上放置图像的 x 坐标位置。
// 3.y 在画布上放置图像的 y 坐标位置。
gr.drawImage(tu,50,100);
}

function tupian2(){
var tu = document.getElementById("tu");
// gr.drawImage(img,x,y,width,height);
// 五个参数，分别表示:
// 1.img 规定要使用的图像、画布或视频。
// 2.x 在画布上放置图像的 x 坐标位置。
// 3.y 在画布上放置图像的 y 坐标位置。
// 4.width 要使用的图像的宽度。（伸展或缩小图像）
// 5.height 要使用的图像的高度。（伸展或缩小图像）
gr.drawImage(tu,50,120,100,100);
}

function tupian3(){
var tu = document.getElementById("tu");
// gr.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
// 九个参数，分别表示：
// 1.img 规定要使用的图像、画布或视频。
// 2.sx 开始剪切的 x 坐标位置。
// 3.sy 开始剪切的 y 坐标位置。
// 4.swidth 被剪切图像的宽度。
// 5.sheight 被剪切图像的高度。
// 6.x 在画布上放置图像的 x 坐标位置。
// 7.y 在画布上放置图像的 y 坐标位置。
// 8.width 要使用的图像的宽度。（伸展或缩小图像）
// 9.height 要使用的图像的高度。（伸展或缩小图像）
gr.drawImage(tu,70,50,200,200,70,159,150,150);
}

//绘制路径
function lujing(){
// gr.beginPath();
// moveTo 仅仅只是坐标点的变化，不会绘制连线
gr.moveTo(10,10);
// lineTo 会从起始坐标绘制一条直线
gr.lineTo(100,200);
gr.stroke();
// gr.closePath();

}
function lujing2(){
gr.arc(100,100,60,0,Math.PI /18,true);
gr.stroke();
}
//绘制曲线
function quxian(){
gr.beginPath();
gr.moveTo(10,50);
gr.lineTo(100,200);
gr.quadraticCurveTo(10,200,200,100);
// gr.closePath();
gr.stroke();

}
</script>
</body>

</html>

二

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<canvas id="mycanvas" width="400" height="500" style="background-color: white;">

浏览器不支持canvas！！！
</canvas>

<div id="mydiv1">

<input type="button" value="绘制渐变1" οnclick="jianbian1()"/>
</br> </br>
<input type="button" value="绘制渐变2" οnclick="jianbian2()"/>

<input type="button" value="转换1" οnclick="zhuanhuan1()"/>

<input type="button" value="阴影" οnclick="yinying()"/>

<input type="button" value="清除" οnclick="qingchu()"/>

</div>

<script>
var mycanvas = document.getElementById("mycanvas");
var gr = mycanvas.getContext("2d");

function qingchu(){
gr.clearRect(0,0,500,400);
}

// var gradient=gr.createLinearGradient(0,0,mycanvas.width,0);
// gradient.addColorStop(0,"magenta");
// gradient.addColorStop(0.5,"yellow");
// gradient.addColorStop(1.0,"white");
//
// gr.beginPath();
// gr.moveTo(150,150);
// gr.arc(150,150,50,5,2*Math.PI/2.5,true);
// gr.fillStyle=gradient;
// gr.fill();
//
//
// gr.beginPath();
// gr.moveTo(152,155);
// gr.arc(152,155,50,7,2*Math.PI/2.5,false);
// gr.fillStyle="cyan";
// gr.fill();
//
// gr.beginPath();
// gr.moveTo(155,152);
// gr.arc(155,152,50,5,Math.PI/4.5,false);
// gr.fillStyle="skyblue";
// gr.fill();

function jianbian1(){
// 创建线性渐变的对象，设置渐变的范围

// gr.createLinearGradient(x0,y0,x1,y1);

// 四个参数，分别表示：

// 1. x0 渐变开始点的 x 坐标
// 2. y0 渐变开始点的 y 坐标
// 3. x1 渐变结束点的 x 坐标
// 4. y1 渐变结束点的 y 坐标
var li = gr.createLinearGradient(50,100,300,100);
// 设置颜色变化的范围
li.addColorStop(0,"yellow");
li.addColorStop(0.5,"white");
li.addColorStop(1,"cyan");
// 将渐变对象赋值给填充属性
gr.fillStyle=li;
// 绘制图形
gr.fillRect(50,100,250,200);
}

function jianbian2(){

// 创建放射状/环形的渐变

// gr.createRadialGradient(x0,y0,r0,x1,y1,r1);

// 六个参数，分别表示：
// 1. x0 渐变的开始圆的 x 坐标
// 2. y0 渐变的开始圆的 y 坐标
// 3. r0 开始圆的半径
// 4. x1 渐变的结束圆的 x 坐标
// 5. y1 渐变的结束圆的 y 坐标
// 6. r1 结束圆的半径

var ra = gr.createRadialGradient(260,200,150,50,100,50);

ra.addColorStop(0,"cyan");
ra.addColorStop(0.5,"yellowgreen");
ra.addColorStop(1,"blue");

gr.fillStyle=ra;

gr.arc(200,200,100,0,2*Math.PI);
gr.fill();

}
function zhuanhuan1(){

// rotate 旋转当前绘图
// eg: gr.rotate(angle);
// 旋转角度，以弧度计。
//如需将角度转换为弧度，请使用 degrees*Math.PI/180 公式进行计算。
//举例：如需旋转 5 度，可规定下面的公式：5*Math.PI/180。

gr.fillStyle="rgba(0,0,0,0.5)";
gr.translate(200,200);
for(var i=0;i<18;i++) {
gr.rotate(20 * Math.PI / 180);
// fillRect 绘制被填充的矩形
gr.fillRect(50, 50, 30, 30);

}
}

function yinying(){

// 设置阴影效果
// 数字越小，颜色越纯；数字越大，颜色越模糊
gr.shadowBlur=10;
gr.shadowColor="green";
gr.shadowOffsetX=10;
gr.shadowOffsetY=10;

gr.fillStyle = "orange";
gr.fillRect(100,100,150,150);
}

</script>
</body>
</html>