欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

canvas绘图

程序员文章站 2022-07-14 15:45:39
...

canvas绘图

HTML5 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成。
标签只是图形容器，必须使用脚本来绘制图形。
anvas 是一个二维网格。
canvas 的左上角坐标为 (0,0)
例： fillRect 方法拥有参数 (0,0,150,75)。
意思是：在画布上绘制 150x75 的矩形，从左上角开始 (0,0)。
canvas绘图

  • canvas画小房子

moveTo(x,y) 定义线条开始坐标
lineTo(x,y) 定义线条结束坐标
arc(x,y,r,start,stop)

<body>
<canvas id="myCanvas" width="500" height="500" > /*创建一个画布*/
</canvas>

<script>


var c=document.getElementById("myCanvas");/*找到myCanvas*/
var ctx=c.getContext("2d");/*创建context对象*/

ctx.beginPath();
ctx.fillStyle ="green";/*背景填充颜色*/
ctx.lineWidth = 5;/*边框大小*/
ctx.strokeStyle = "#F5270B";/*边框颜色*/
ctx.moveTo(50,150);/*起点*/
ctx.lineTo(200,50);/*终点*/
ctx.lineTo(350,150);/*终点*/
ctx.strokeRect(50,150,300,150);/*画矩形*/
ctx.strokeRect(80,180,80,80);/*画矩形*/
ctx.stroke();/*画图*/
ctx.fill();/*填充*/
ctx.closePath();

ctx.beginPath();
ctx.fillStyle = "green";
ctx.fillRect(250,200,60,100);/*画矩形*/
ctx.fill();
ctx.stroke();
ctx.closePath();


</script> 

</body>

canvas绘图

  • canvas画渐变圆

createLinearGradient(x,y,x1,y1) - 创建线条渐变
addColorStop()方法指定颜色停止，参数使用坐标来描述，可以是0至1.
使用渐变，设置fillStyle或strokeStyle的值为 渐变，然后绘制形状，如矩形，文本，或一条线。

<body>
<canvas id="canvas" width="500" height="500" > 
</canvas>
<script>
var canvas = document.getElementById("canvas");  
var context= canvas.getContext("2d");  
context.beginPath();  
var grad= context.createLinearGradient(50,50,350,300);  /*线性渐变*/
grad.addColorStop(0,'red');  /*红色*/  
grad.addColorStop(0.5,'white');  /*白色*/ 
grad.addColorStop(1,'blue');  /*蓝色*/
context.fillStyle = grad;  /*渐变填充*/
context.arc(200,200,150,0,2*Math.PI,true); /*画圆*/ 
context.fill();  
context.closePath();
</script>
</body>

canvas绘图

  • canvas画圆弧
<body>
<canvas id="canvas" width="500" height="500" > 
<script>

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
    context.beginPath();
    context.lineWidth=5;
    context.strokeStyle="green";
    context.arc(100,80,60,2,1.5*Math.PI);/*画圆弧*/
    context.fillStyle="red"
    context.fill();
    context.stroke();
    context.closePath();

    context.beginPath();
    context.lineWidth=5;
    context.strokeStyle="green";
    context.moveTo(95,20);           // 创建开始点
    context.lineTo(300,20);
    context.lineTo(73,135);
    context.stroke(); 
    context.closePath();

    </script>
</body>

canvas绘图

相关标签： HTML canvas

上一篇： Android Camera fw学习(四)-recording流程分析

下一篇： 高通8937平台手机关机概率卡住问题分析

推荐阅读