CSS3-Canvas画布（线条）

时间 2019-12-09

标签 css3 css canvas 画布线条栏目 CSS 繁體版

原文原文链接

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>CSS3-Canvas画布（线条）</title>    <script>     window.onload=function () {         var canvas=document.getElementById("canvas");//获取canvas对象         var ctx=canvas.getContext("2d"); //建立二维的绘图上下文对象         //经过上下文对象调用属性或方法来绘图         ctx.beginPath();//  “beginPath()” 表开始一条路径或者重置当前的路径         ctx.lineCap="round";//圆角线条         ctx.moveTo(5,100);//开始点坐标         ctx.lineTo(200,300);//结束点坐标         ctx.lineWidth=20;//“lineWidth”定义路径的宽度（有继承性，如要定义不一样宽度的路径则要单独定义）         ctx.strokeStyle="lightblue";//“strokeStyle”填充路径的颜色         ctx.stroke();//调用 绘制         ctx.beginPath();//  “beginPath()” 表开始一条路径或者重置当前的路径         ctx.lineCap="round";//圆角线条         ctx.moveTo(30,30);//开始点坐标         ctx.lineTo(300,300);//结束点坐标         ctx.lineWidth=20;//“lineWidth”定义路径的宽度（有继承性，如要定义不一样宽度的路径则要单独定义）         ctx.strokeStyle="lightpink";//“strokeStyle”填充路径的颜色         ctx.stroke();//调用 绘制         ctx.beginPath();//  “beginPath()” 表开始一条路径或者重置当前的路径         ctx.lineCap="square";// 正方形线条         ctx.moveTo(10,50);//开始点坐标         ctx.lineTo(350,400);//结束点坐标         ctx.strokeStyle="lightgreen";//填充路径的颜色         ctx.stroke();//调用 绘制     }    </script></head><body><h2>Canvas画布（线条）</h2><canvas id="canvas" width="500" height="500" style="border:1px solid red ">           浏览器不支持canvas</canvas></body></html>

1. 13-1 画布绘制基本线条
2. Canvas线条动画
3. 基于HTML5 画布功能canvas的绘画板：画线、画圆、画矩形、橡皮、改变线条
4. 【Web动画】SVG 线条动画入门
5. SVG 线条动画入门
6. 炫酷线条动画--svg
7. svg 线条动画浅尝
8. PPT制做线条动画
9. c#画一条横线
10. PS 画一条虚线
更多相关文章...
• C# 多线程 - C#教程
• ionic 加载动画 - ionic 教程
• JDK13 GA发布：5大特性解读
• 适用于PHP初学者的学习线路和建议