知识点
相关文章
更多最近更新
更多HTML5 Canvas 画图标签、画线、圆、渐变色
2019-03-12 01:05|来源: 领悟书生
内容摘要：Canvas标签定义，并获得坐标；画矩形，定义颜色，透明度；画直线，定义连接，节点；画圆，定义弧度，节点；画渐变色，定义节点渐变效果；读入一张图片
1、Canvas标签定义，并获得坐标
<canvas id="mycanvas" width="500" height="500"
onmousemove="mousexy(event)"></canvas>
<div id="ds"></div>
//监视鼠标
function mousexy(n){
x=n.clientX;
y=n.clientY;
$("#ds").html("坐标: x轴"+x+" y轴"+y);
}2、画矩形，定义颜色，透明度
<canvas id="mycanvas" width="500" height="500></canvas>
JS部分
var c=document.getElementById("mycanvas");
var p100=c.getContext("2d");
------
p100.fillStyle="#FF0000"; //定义颜色
p100.fillRect(0,0,300,300); //定义矩形的大小
p100.fillStyle="rgba(0,0,255,0.5)"; //定义颜色，支持透明
p100.fillRect(200,200,500,500); //定义矩形大小3、画直线，定义连接，节点
<canvas id="mycanvas" width="500" height="500></canvas>
js 部分
var c=document.getElementById("mycanvas");
var p100=c.getContext("2d");
------
p100.moveTo(10,10); //起始位置
p100.lineTo(150,50); //终止位置
p100.lineTo(10,50); //如果没有再次设置起始位置将从结束位置开始画
p100.stroke(); //结束图形4、画圆，定义弧度，节点
<canvas id="mycanvas" width="500" height="500></canvas>
Javascript 部分：
var c=document.getElementById("mycanvas");
var p100=c.getContext("2d");
------
p100.fillStyle="blue"; //定义演示
p100.beginPath(); //从新开始画，防止冲突重叠
p100.arc(200,200,30,0,Math.PI*2,true); //x坐标，y坐标，直径，始，终，时针
p100.closePath(); //结束画布，防止冲突重叠
p100.fill(); //结束渲染5、画渐变色，定义节点渐变效果
<canvas id="mycanvas" width="500" height="500></canvas>
Javascript 部分：
var c=document.getElementById("mycanvas");
var p100=c.getContext("2d");
------
var grd=p100.createLinearGradient(100,100,175,50); //颜色渐变的起始坐标和终点坐标
grd.addColorStop(0,"yellow"); //0表示起点..0.1 0.2 ...1表示终点，配置颜色
grd.addColorStop(1,"blue");
p100.fillStyle=grd; //生成的颜色块赋值给样式
p100.fillRect(100,100,175,50); //设置色块6、绘图片
<canvas id="mycanvas" width="500" height="500></canvas>
Javascript 部分：
var c=document.getElementById("mycanvas");
var p100=c.getContext("2d");
------
var img=new Image()
img.src="logo.png"
p100.drawImage(img,220,30);7、完整示例
<!DOCTYPE html>
<head>
<meta charset=utf-8>
<title>PHP100 HTML5视频教程-canvas</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<canvas id="mycanvas" width="500" height="500"
onmousemove="mousexy(event)"></canvas>
<div id="ds"></div>
<script type="text/javascript">
var c=document.getElementById("mycanvas");
var p100=c.getContext("2d");
p100.fillStyle="#FF0000"; //定义颜色
p100.fillRect(0,0,300,300); //定义矩形的大小
p100.fillStyle="rgba(0,0,255,0.5)"; //定义颜色，支持透明
p100.fillRect(200,200,500,500); //定义矩形大小
//========线======
p100.moveTo(10,10); //起始位置
p100.lineTo(150,50); //终止位置
p100.lineTo(10,50); //如果没有再次设置起始位置将从结束位置开始画
p100.stroke(); //结束图形
//=======圆=======
p100.fillStyle="blue"; //定义演示
p100.beginPath(); //从新开始画，防止冲突重叠
//x坐标，y坐标，直径，Math.PI是圆周率
p100.arc(200,200,30,0,Math.PI*2,true);
p100.closePath(); //结束画布，防止冲突重叠
p100.fill(); //结束渲染
//======颜色渐变====
//颜色渐变的起始坐标和终点坐标
var grd=p100.createLinearGradient(100,100,175,50);
//0表示起点..0.1 0.2 ...1表示终点，配置颜色
grd.addColorStop(0,"yellow");
grd.addColorStop(1,"blue");
p100.fillStyle=grd; //生成的颜色块赋值给样式
p100.fillRect(100,100,175,50); //设置色块
//=======图形载入=====
var img=new Image()
img.src="logo.png"
p100.drawImage(img,220,30);
//监视鼠标
function mousexy(n){
x=n.clientX;
y=n.clientY;
$("#ds").html("坐标: x轴"+x+" y轴"+y);
}
</script>
</body>
</html>效果图：
本文链接：HTML5 Canvas 画图标签、画线、圆、渐变色 ，由领悟书生原创
转载请注明出处【http://www.656463.com/article/332】
相关问答
更多-
SVG可以很好地使用模式：你可以简单地在评论中使用div作为loxxy，但是如果你真的想出于某些原因使用canvas，那么你的代码就是jsfiddle（已修复）： http://jsfiddle.net/aS9VG/ 诀窍是将元素设置为绝对位置，以便它可以与另一个元素重叠： style="position:absolute;right:150px;bottom:300px" You could simply use a div as loxxy said in a comment, but if you really want t ...不，不是的。 画布或它的上下文并不知道它们实际发生了什么（正在被绘制）。 您将不得不“将回调附加到查看器的渲染操作”。 No, it does not. The canvas or it context doesn't have a clue what's actually happening to (/being drawn on) them. You're going to have to "attach a callback to the viewer's rendering operation."我认为有一些方法... 在点击发布后重新绘制所有内容 这很简单，但不是很有效。 只重绘修改过的部分 具有9个参数的drawImage只重绘改变的背景图像部分，然后重新绘制黑色文本。 点击之前保存图像数据然后恢复 这使用了2D上下文的getImageData和putImageData。 （不确定它是否被广泛实现。） 这里的规范： ImageData getImageData(in double sx, in double sy, in double sw, in double sh); void putIma ...你当然可以。 事实上，您可以使用任何可重复的东西填充任意形状，即使您在Canvas中制作的形状也是如此！ 下面是一个任意形状的例子，它充满了在画布上定义的“豌豆荚”： http : //jsfiddle.net/NdUcv/ 这是一个简单的棋盘格式： http : //jsfiddle.net/NdUcv/2/ 第二个使形状填充看起来像这样： 我通过制作一个画布然后绘制任何我想重复的内容来创建该模式： var pattern = document.createElement('canvas'); patte ...
随着HTML5 [2022-10-23]
有一些挑战。 本地数据存储 Swing应用程序可以使用磁盘存储数据。 假设HTML 5中可用的本地数据存储工作，那么将文件/磁盘访问自动地映射到本地数据存储调用仍然很困难。 多线程和同步 Swing应用程序通常会创建线程，而GWT则无法实现。 搞砸正确。 网络访问 Swing应用程序可以连接到任意网络位置，这不适用于GWT。 使用浏览器中没有的java语言功能 core-java之外的任何东西都是不可访问的，因此自动端口可能会失败。 内存和性能优化垃圾收集模式完全不同。 如何针对最佳下载大小进行优化？ 如何 ...根据我的理解，在WebIDL中描述了getContext方法中ES3中的[[DontDelete]]，ES5中的[[Configurable]]的可配置性 - 与任何其他CanvasRenderingContext2D方法一样。 看看“接口原型对象”部分，其中说： 无论接口是否使用[NoInterfaceObject]扩展属性声明，都必须存在定义的每个接口的接口原型对象。 特定接口的接口原型对象具有与该接口上定义的属性和操作相对应的属性。 这些属性在下面的4.5.5和4.5.6节中有更详细的描述。 在4.5 ...稍微搜索一下，我从Mozilla Development Network找到了这个例子 function draw() { var ctx = document.getElementById('canvas').getContext('2d'); var radgrad = ctx.createRadialGradient(0,0,1,0,0,150); radgrad.addColorStop(0, '#A7D30C'); radgrad.addColorStop(1, ...您可以使用转换。 就像在这个实例中一样 。 context.save() ; context.translate(150,150) ; context.scale(2,1) ; context.translate(-150,-150) ; context.moveTo(150, 150); context.arc(150, 150, 50, 0, 3*Math.PI/4, true); context.closePath(); context.stroke() ; context.restor ...