您的位置：首页 > Web前端 > HTML5

h5 canvas 画图

2016-03-16 21:25 375 查看

h5 canvas 画图

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript">
$().ready(function () {
var $c=$("#cans");
$c.bind('mousemove', function (event) {
var x=event.clientX;
var y=event.clientY;
$("#res").text("坐标：x轴"+x+"坐标：y轴"+y);
});
// 画矩形
var d=$c.get(0).getContext("2d");  //2d
d.fillStyle="red";    //颜色
d.fillRect(0,0,100,100); // 矩形
d.fillStyle="rgba(0,0,255,0.5)";  //最后一个是程春明度
d.fillRect(200,0,100,100);
//            画线
d.moveTo(110,110); //起始位置
d.lineTo(130,130); //终止位置
d.lineTo(155,120); // 如果没有再次设置起始位置则从终止位置继续画
d.stroke(); // 结束图形
//            圆
d.fillStyle="blue";
d.beginPath(); // 从新开始画，防止 冲突重叠
d.arc(100,200,30,0,Math.PI*2,true); // x y 坐标 半径30
d.closePath(); // 结束画布，防止冲突重叠
d.fill(); // 结束渲染
//            颜色渐变
var grd= d.createLinearGradient(250,250,375,250); // 颜色渐变的起始和终止坐标
grd.addColorStop(0,'red'); // 0 表示起点  0.1 0.2.。。1 表示终点
grd.addColorStop(0.8,'green');
grd.addColorStop(1,'blue');

d.fillStyle=grd;
d.fillRect(250,250,375,250);  // 设置色块
//            载入图形
var img=new Image()
img.src="../img/logo.png"

//等图像 加载完毕，再绘制图像
img.onload= function () {

//d.drawImage(img,200,30);   // 加载图片

// 背景图片平铺
var pattern = d.createPattern(img, "repeat");
//2、将返回值设置给fillStyle属性
d.fillStyle = pattern;
//3、填充矩形
d.fillRect(0, 0, 400, 300);
}

//切割图像
d.beginPath();
d.arc(150,150,50,0,Math.PI * 2 , true);
d.closePath();
d.clip();

}); </script> </head> <body> <canvas id="cans" width="500" height="500">浏览器不支持canvas</canvas> <div id="res"></div> </body> </html>

h5画图补充

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>day04 pm 完</title>
<style>

</style>
<script src="js/jquery.min.js"></script>
<script>
$().ready(function () {
var can=$("#canvas").get(0);   //转成 dom 操作
d=can.getContext("2d");
d.fillStyle="red";    //填充颜色
d.strokeStyle='green'; // 线条颜色
d.strokeRect(50,50,100,100);  //边框矩形
d.fillRect(60,60,80,80); // 实心矩形
d.clearRect(70,70,60,60);  //擦除矩形

// 封闭的三角形
d.beginPath();        // 添加  beginPath() closePath() 就可以形成封闭图形
d.moveTo(110,110); //起始位置
d.lineTo(130,130); //终止位置
d.lineTo(155,120); // 如果没有再次设置起始位置则从终止位置继续画

d.closePath();
d.fillStyle="blue";
d.stroke(); // 结束图形
d.fill();
//  左半圆
d.fillStyle="green";
d.beginPath(); // 从新开始画，防止 冲突重叠
d.arc(100,200,30,Math.PI/2,Math.PI*3/2,false);
// x y 坐标 半径30 位置 上 PI*3/2 右 0 / 2PI  下 pi/2 左 pi  true false表示顺时针或逆时针
d.closePath(); // 结束画布，防止冲突重叠
d.fill(); // 结束渲染
//任意矩形
$("#btn").click(function () {
var x=parseInt(Math.random()*500);
var y=parseInt(Math.random()*400);
d.fillRect(x,y,100,100);
});
// 缩放
$("#btnScale").click(function () {
d.scale(1.2,1.2);  //放大1.2倍 要再画矩形才有效果
//                d.translate(100,100);
//                d.save(); // 保存扩大缩小等的状态
//                d.restore(); //  恢复状态
});
});

</script>
</head>
<body>
<canvas id="canvas" width="800" height="500" style="border:1px solid green;">
不支持 canvas
</canvas>
<br>
<button type="button" id="btn">button</button>
<button type="button" id="btnScale">btnScale</button>
</body>
</html>

html5绘制文字

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="js/jquery.js"></script>
<script>
$(function () {
var canvas = $("#canvas").get(0);
var d = canvas.getContext("2d");
d.lineWidth=1;
d.strokeStyle='green';
d.font = "bold 24px 微软雅黑";
d.strokeText("你好,世界!",20,20);   //空心文字轮廓
d.fillText("你好,世界!",125,125);   // 文字
//阴影文字

d.shadowColor="red";  //阴影
d.shadowOffsetX=5;      // 偏移
d.shadowOffsetY=5;      //
d.shadowBlur=5;          // 阴影模糊效果
d.font = "bold 24px 微软雅黑";
d.fillText("微软雅黑!",35,50);
});
</script>
</head>
<body>
<canvas id="canvas" width="800" height="300"></canvas>
</body>
</html>

html5 线条粗细张条线冒

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="js/jquery.js"></script>
<script>
$(function () {
var canvas=$("#canvas").get(0);
var d=canvas.getContext("2d");
//线条粗细  lineWidth:1
// 线条线冒： lineCap:butt round square
d.lineWidth=6;     // 线条粗细
d.lineCap='round';   //头尾圆角
//d.lineJoin='round';  // 线条连接处圆角
d.lineJoin='miter';   //  两条线形成的锐角长度，默认为10
d.miterLimit=8;
d.strokeStyle='green';
d.moveTo(110,110); //起始位置
d.lineTo(150,150); //终止位置
d.lineTo(125,100); // 如果没有再次设置起始位置则从终止位置继续画
d.stroke(); // 结束图形
});
</script>
</head>
<body>
<canvas id="canvas" ></canvas>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航